jquery - 滚动 JQuery -move

Question

我有一个带有 img 的简单按钮。双img：顶部的蓝色箭头，底部的绿色箭头（高度44px）。由于不同的原因，我不能将 img 放在后台。所以我尝试将 img 放在 html 中并用 jQuery 移动它。但它不动。任何人都可以帮忙吗？ http://jsfiddle.net/uPd86/

HTML：

<div id="button">
  <div id="text">boto</div>
  <div id="arrow"><img src="http://www.mig-marketing.com/img/arrowDouble.png"></div>
</div>​

CSS：

#button{
    position:absolute;
    top:20px;
    left:20px;
    width:45px;
    height: 15px;
    line-height: 15px;
    overflow:hidden;
}    

#text{
    position:absolute; 
}

#arrow{
    position:absolute;
    right:0px;
    width:15px;
    height:15px;
}​

JAVASCRIPT：

$(function(){

    $("#button").hover(function() {
        $("#button #arrow").animate({top: "-22"}, 1200);
    });

})

​</p>

Answer 1

您是否尝试这样做：

http://jsfiddle.net/rathoreahsan/uPd86/6/

jQuery

$(function(){

    $("#button").hover(function() {
        $("#button #arrow").animate({top: "-17px"}, 1200);
    }, function(){
        $("#button #arrow").animate({top: "0px"}, 1200);
    });

})

Answer 2

这是使用 jQuery 进行翻转图像的代码箱的简单解决方案。

$(function() {
    $("#button #arrow").mouseenter(function() {
        $("#button #arrow").animate({
            top: "-17"
        }, 500);
    });
    $("#button #arrow").mouseleave(function() {
        $("#button #arrow").animate({
            top: "0"
        }, 500);

    });
});

试用演示：http ://codebins.com/codes/home/4ldqpb4