jquery - マウスオーバーで画像をスクロールする方法は？

Question

私はウェブサイトhttp://www.chitarrastudio.com/を作成しました。上部にはクラシックとギブソンの 2 つのギターがあります。

効果を実現したい: マウスがホバーすると、ギターや他のスライドが下にスライドして完全に表示されます (クリックするとリンクがあります)。

要するに、これは Web サイトの多くのメニューと同じ効果です。ここでは、「Perhier」を渡しています。 http://www.onextrapixel.com/examples/cool-menu/ .

Answer 1

これはCSSでのみ行うことができるため、ここにあるすべての答えには同意しません。

img {
    position:relative;
    top:-100px;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -ms-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
}

img:hover {
    top:0;
}

フィドル:

http://jsfiddle.net/TyBHu/

Answer 2

jqueryで次のようなことを試してください：

例:フィドル

JS:

$(document).ready(function() {

    $("img").hover(

    function () {
        $(this).stop().animate({
            top: '0px'
        }, 'slow');
    },

    function () {
        $(this).stop().animate({
            top: '-100'
        }, 'slow');
    });

});