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

})

Answer 1

这是使用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

进行演示

Answer 2

您是否尝试这样做：

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

<强>的jQuery

$(function(){

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

})

滚过JQuery -move

2 个答案: