Adding slideUp / slideDown to hover function

Question

I have been helped with the code to hover over an image and for another image to appear over the original.

$('.hoverpic').hover(function () {
    $(this).attr('src',$(this).attr('src').replace('.jpg','_hover.jpg'));
}, function () {
    $(this).attr('src',$(this).attr('src').replace('_hover.jpg','.jpg'));
});

It works well but I would like the second image to slideUp on hover and then slideDown when leaving. I'm very new to this and try as I might cannot get it to work. Very simplified help would be appreciated

Answer 1

This method assumes the image(s) are the same width and height and have a fixed width/height.

You declare both images (the normal and the hover) in the html to start with in a 'containing' div, giving this container the same width and height as the images (in my example I've used 300px by 200px). The hover image is hidden outside of the frame at first (using absolute positioning on the images and overflow: hidden on the container div with CSS) but it slides in on hover.

See demo here: http://jsfiddle.net/2JSxK/7/

Just replace the HTML there with:

<div id="image-container">
    <img class="pic" src="YOURIMAGENAME.jpg" />
    <img class="hoverpic" src="YOURIMAGENAME_hover.jpg" />
</div>

And the CSS with the width and heights of your image:

#image-container {
    position: relative;
    width: 300px; /* put your image width in pixels here */
    height: 200px; /* put your image height in pixels here */
    overflow: hidden;
    }

#image-container img.pic {
    position: absolute;
    top: 0;
    left: 0;
    }

#image-container img.hoverpic {
    position: absolute;
    top: 200px; /* put your image height in pixels here */
    left: 0;
    }

The same in the jQuery, just replace 200 twice with your image height in pixels:

$(document).ready(function() {
    $('.pic').hover( 
        function () {
            $('.hoverpic').animate({ "top": "-=200px" }, "slow" );
        },
        function () {
            $('.hoverpic').animate({ "top": "+=200px" }, "slow" );
        }
     );
 });

You can also change the speed above "slow" to "fast" or a number in milliseconds, eg. 1000 would be a second. Depends how fast you want the sliding to happen obviously!

Corrected: Hover effect now associated with the container rather than the individual image, so that hover image doesn't disappear when you move your mouse.

See demo here: http://jsfiddle.net/2JSxK/16/

New jQuery:

$(document).ready(function() {
    $('#image-container').hover( 
        function () {
            $('.hoverpic').animate({ "top": "-=200px" }, "slow" );
        },
        function () {
            $('.hoverpic').animate({ "top": "+=200px" }, "slow" );
        }
     );
 });

Edited: To account for more than one of this animation happening on a page, I changed how I structured/wrote things slightly (see below comments).

Latest demo here: http://jsfiddle.net/2JSxK/17/

Answer 2

You'll need slideToggle for this: http://api.jquery.com/slideToggle/

<div id="container">
<img id="img1" src="http://images2.wikia.nocookie.net/__cb20120626230828/watchdogs/images/6/6c/IE-icon.png" alt="" />
<img id="img2" src="http://upload.wikimedia.org/wikipedia/commons/8/87/Google_Chrome_icon_%282011%29.png" alt="" style="display:none"/>
</div>

$('#container').hover(function() {
    $('#img1').slideToggle(500, 'linear');
    $('#img2').slideToggle(500, 'linear');
});

Check this fiddle http://jsfiddle.net/suneeel/SRNJb/1/