jquery - jQuery动画在悬停效果上增加

Question

当我不再悬停时，我希望我悬停的图像向上移动并再次向下移动。我可以使用 CSS3 来实现这种效果，但由于并非所有浏览器都支持它，我希望它也可以与 jQuery 一起使用。我为你创建了一个小提琴：http: //jsfiddle.net/fSthA/2/

这是我的 jQuery 代码：

$('.full-circle').mouseOver(
    function(){
        $(this).stop().animate(
            {margin-top: '2'}, 500, 'swing'   
        );//end animate
    },//end function
    function(){
        $(this).stop().animate(
            {margin-top: '15'}, 500, 'swing'
        );//end animate
    }//end function
);//end hover

Answer 1

我不确定你的问题是什么，但我修改了你的小提琴以通过 jQuery 来完成。我只需要删除 css 过渡，:hover样式，将 jQuery 添加到小提琴中，将您的animate调用更改为使用marginTop而不是margin-top：

$('.full-circle').hover(
    function(){
        $(this).stop().animate(
            {marginTop: '2'}, 500, 'linear'   
        );//end animate
     },//end function
    function(){
        $(this).stop().animate(
            {marginTop: '15'}, 500, 'linear'
        );//end animate
    }//end function
);//end hover

http://jsfiddle.net/fSthA/5/