Jquery Animate 在输入提交按钮上工作？答案

【问题标题】：Jquery Animate to work on input submit button?Jquery Animate 在输入提交按钮上工作？
【发布时间】：2013-02-04 12:04:43
【问题描述】：

我有一个 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 不太熟悉，因此我们将不胜感激。

【问题讨论】：

标签： jquery jquery-animate

【解决方案1】：

一种可能的方法：

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

为了使图像动画化，您可以在悬停时使用$('.button').animate({"backgroundPosition": POSITION})，您可以在其中更改提交按钮的背景图像位置

【讨论】：

您好 IanO，感谢您的建议，但它不起作用。原因是按钮使用了两个图像。一个背景图像来设置按钮本身的样式（不动画）和另一个动画的图像。我已经用第一个背景图像设置了输入按钮的样式，但我似乎无法让第二个图像设置动画。我尝试将输入按钮包含在一个 div 中并将图像添加到 div 中，但这只是为图像和输入按钮设置动画。
目前我可以让这两个图像都动画化，正如在这个 jsfiddle jsfiddle.net/tcherokee/KYsCj/5 中看到的那样。但我只想让篮子图像而不是整个按钮动画。

【解决方案2】：

好的，想通了。

我将 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>

这似乎行得通。我不确定它是否是最优雅的解决方案......但它确实有效:)。

【讨论】：