jQuery Simultaneous Fade and Resize

BYU-Studies
BYU-Studies used Ask the Experts™
on
I'm trying to have an image resize and fade using jQuery.  I am able to perform each effect separately, but having almost no experience with jQuery, I can't figure out how to have them happen at the same time.

After everything I can think of, this is what always happens:

The image will fade in, then immediately resize.

Here is the code I was using:

            $(document).ready(function () {
                $("#image1").fadeIn(1000)
                $("#image1").animate({ width: "400px", height: "400px" }, 1000);
            });

Open in new window


Thanks!
Jeremy
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
To get your animations to work together, you include them altogether in the animate call (like you're already doing for the height and width).  The fadeIn changes the opacity.  So try...

  $("#image1").animate( {width: "400px", height: "400px", opacity: 1 }, 1000)
<html>

	<head>
		<script language="javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
	<script language="javascript">
		$(document).ready(function () {
			$("#image1").css( {opacity: 0} );
			$("#image1").animate( {width: "400px", height: "400px", opacity: 1 }, 1000)
		});

    	</script>
	</head>
	<body>
		<img id="image1" src="test.jpg" />
	</body.
</html>

Open in new window

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial