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

我有一个href按钮，其上有一段JavaScript动画，它使得篮子在悬停时上下跳动。但是，我需要将href链接更改为输入提交按钮，我似乎无法让动画与输入按钮正常工作。Jquery Animate在输入提交按钮上工作？

这是我使用的动画

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

的JavaScript，这是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，所以任何帮助将不胜感激。

来源

2013-02-04 tcherokee

一个可能的办法：

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

以动画图像，你可以在悬停时使用$('.button').animate({"backgroundPosition": POSITION})，在那里你可以改变SUBMIT按钮的背景图像位置

来源

2013-02-04 12:49:10

你好IanO，谢谢你的建议，但它不会工作。原因是该按钮使用两个图像。一个背景图像来设置按钮本身的风格（不动画）和另一个获得动画效果的图像。我已经使用第一个背景图像对输入按钮进行了样式设置，但似乎无法使第二个图像生成动画。我尝试将输入按钮封闭在div中并将图像添加到div，但只是为图像和输入按钮设置了动画。 – tcherokee

目前我可以通过这个jsfiddle http://jsfiddle.net/tcherokee/KYsCj/5/获得两个图像的动画。但我只是想让篮子图像变成动画，而不是整个按钮。 – tcherokee

好吧把它画出来。

我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-04 17:24:36 tcherokee

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

回答

相关问题