如何使用jQuery实现此图像效果？

Question

http://www.gallyapp.com/tf_themes/chalong_wp/?gallery=this-is-gallery-build-from-custom-post-type-with-image-uploader-backend

我想为我的图像做这个效果，jQuery在悬停时上下移动它，我找到了一个用mootools做这个效果的插件，但问题是它对我的代码效果不好。

我想知道是否有一种简单的方法可以产生这种效果？因为我不需要灯箱只是悬停时的图像效果！

Answer 1

这就是网站does it

的确切方式

$j('.home_portfolio img.frame').each(function() {
    $j(this).hover(function() { 
        $j(this).animate({top: '-10px'}, 300);
    },
    function() {    
        $j(this).animate({top: 0}, 300);
    }); 
});

Answer 2

您可以使用jQuery animate() method。您只需要为位置设置动画并使用一些缓动来获得更令人愉悦的过渡效果。

以下是一个示例：http://jsfiddle.net/tgh8m/56/

Answer 3

你可以做这样简单的事情

$('.hoverImg').hover(function(){
    $(this).css('padding-top','0px');
    },
    function(){
    $(this).css('padding-top','20px');
    }                 
);

http://jsfiddle.net/jasongennaro/SHrBQ/

Answer 4

jsFiddle

$('img.frame').hover(function(){
    $(this).animate({
        'margin-top': '0px'
    }, 400);
},
function(){ 
    $(this).animate({
        'margin-top': '10px'
    }, 400);
});