Добавление slideUp/slideDown в функцию наведения

Этот метод предполагает, что изображения имеют одинаковую ширину и высоту и фиксированную ширину/высоту.

Вы объявляете оба изображения (обычное и при наведении) в html, чтобы начать с «содержащего» div, придавая этому контейнеру ту же ширину и высоту, что и изображения (в моем примере я использовал 300 пикселей на 200 пикселей). Изображение при наведении сначала скрыто за пределами фрейма (используя абсолютное позиционирование на изображениях и overflow: hidden в контейнере div с помощью CSS), но оно скользит при наведении.

См. демо здесь: http://jsfiddle.net/2JSxK/7/

Просто замените HTML на:

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

И CSS с шириной и высотой вашего изображения:

#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;
    }

То же самое в jQuery, просто дважды замените 200 высотой вашего изображения в пикселях:

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

Вы также можете изменить скорость выше "slow" на "fast" или число в миллисекундах, например. 1000 будет вторым. Очевидно, зависит от того, насколько быстро вы хотите, чтобы скольжение произошло!

Исправлено: эффект при наведении теперь связан с контейнером, а не с отдельным изображением, поэтому изображение при наведении не исчезает при перемещении мыши.

См. демонстрацию здесь: http://jsfiddle.net/2JSxK/16/.

Новый jQuery:

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

Отредактировано: чтобы учесть несколько таких анимаций, происходящих на странице, я немного изменил структуру/написание (см. комментарии ниже).

Последняя демонстрация здесь: http://jsfiddle.net/2JSxK/17/

Для этого вам понадобится slideToggle: 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');
});

Проверьте эту скрипту http://jsfiddle.net/suneeel/SRNJb/1/.