Question

我有一个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>

以下是orignal按钮http://jsfiddle.net/tcherokee/wkfrG/

的工作Jsfiddle

我对Jquery不太熟悉，所以任何帮助都将不胜感激。

Answer 1

一种可能的方法：

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

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

Answer 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>

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

Jquery Animate处理输入提交按钮？

2 个答案: