jQuery Forum

Note that the target value of the height property is 'toggle'. Since the image was visible before, the animation shrinks the height to 0 to hide it. A second click then reverses this transition:

1. <div id="clickme"> Click here </div> <img id="book" src="book.png" alt="" width="100" height="123" style="position: relative; left: 10px;" />

   To animate the opacity, left offset, and height of the image simultaneously:

   $('#clickme').click(function() { $('#book').animate({ opacity: 0.25, left: '+=50', height: 'toggle' }, 5000, function() { // Animation complete. }); }); 

   
   

Thanks

1. A user hovers over (or clicks on - not sure which will work best) the image div, and content div appears next to it. The content is visible until the user hovers over the image again, then it disappears. Next hover, next paragraph of content, and so on.
   
2. The content text is in an xml or json file and dynamically retrieved using ajax call and displayed in the content div.
3. the content div has a specific width & height and has a background. 
   
4. the content div is not dynamically created. It is literally just a block element that will be hidden until the user mouses over the image.
5. For a nice effect, I'd like the content div to have an effect like it is stretching in size from right to left (image div is on its right) until it reaches it's full width in the content div. 
6. An effect I've seen on "cover" @jquery.malsup.com is the closest to what I'm talking about, but if there is something better, please let me know.