0

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>

4

2 に答える 2

0

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

于 2012-07-09T12:22:55.417 に答える
0

これを行おうとしていますか：

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

jQuery

$(function(){

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

})
于 2012-07-10T04:09:31.193 に答える