2

ホバー時にバスケットを上下にジャンプさせるjavascriptアニメーションのあるhrefボタンがあります。ただし、href リンクを入力送信ボタンに変更する必要があり、アニメーションを入力ボタンで正しく動作させることができないようです。

これは私がアニメーションに使用しているjavascriptです

<script type="text/javascript">
    $(document).ready(function(){
        $(".button").hover(function(){
            $(":not(:animated)", this)
                // first jump  
                .animate({top:"-=6px"}, 200).animate({top:"+=6px"}, 200)
                // second jump
                .animate({top:"-=3px"}, 100).animate({top:"+=3px"}, 100)
                // the last jump
                .animate({top:"-=2px"}, 100).animate({top:"+=2px"}, 100);
        });
    })
</script>

これがHTMLです

<div class="addbasketbut"> 
<a class="button" href="#">
    <img src="template_images/basketbutton.png" alt="" />Add to Basket
</a>
</div>

これは元のボタンの動作中の Jsfiddle ですhttp://jsfiddle.net/tcherokee/wkfrG/

私はJqueryの経験があまりないので、どんな助けでも大歓迎です。

4

2 に答える 2

0

考えられるアプローチの 1 つ:

入力ボタンの場合、CSS で背景画像を使用して SUBMIT ボタンを覆うことができます (これがおそらく唯一の方法だと思います)。

画像をアニメーション化するために、ホバーで使用できます$('.button').animate({"backgroundPosition": POSITION})。ここで、送信ボタンの背景画像の位置を変更します

于 2013-02-04T12:49:10.703 に答える
0

わかりました。

jqueryコードをこれに更新しました

$(document).ready(function () {
$(".addbasketbut").hover(function () {
    $(".image:not(:animated)", this)
    // first jump  
    .animate({
        top: "-=6px"
    }, 200).animate({
        top: "+=6px"
    }, 200)
    // second jump
    .animate({
        top: "-=3px"
    }, 100).animate({
        top: "+=3px"
    }, 100)
    // the last jump
    .animate({
        top: "-=2px"
    }, 100).animate({
        top: "+=2px"
    }, 100);
});
})

そしてこれへのhtml

<div class="addbasketbut">
<img src="template_images/basketbutton.png" class="image" alt=""/>
<input class="button" type="submit" value="Submit">
</div>

それはうまくいくようです。それが最もエレガントなソリューションであるかどうかはわかりません...しかし、うまく機能します:)。

于 2013-02-04T17:24:36.823 に答える