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在輸入提交按鈕上工作？

回答

相關問題