2

我有一个 href 按钮，上面有一段 javascript 动画，可以让篮子在悬停时上下跳跃。但是，我需要将 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>

这是原始按钮http://jsfiddle.net/tcherokee/wkfrG/的工作 Jsfiddle

我对 Jquery 不太熟悉，因此将不胜感激任何帮助。

4

2 回答 2

0

一种可能的方法：

对于输入按钮，您可以使用 CSS 中的背景图像来覆盖提交按钮（我认为这可能是唯一的方法）

为了使图像动画化，您可以$('.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 回答