使用jQuery淡入淡出的動畫按鈕

我有一個輸入按鈕，它具有來自css的圖像。當輸入按鈕懸停或點擊時，來自css的圖像會更改其背景位置。使用jQuery淡入淡出的動畫按鈕

例如，

input { height: 50px; width: 100px; background-position: 0 0; } 
input:hover { background-position: 0 -60px; } 
input:active { background-position: 0 -120px; }

我該如何使用jQuery使轉換慢而平滑淡入淡出而不是自動更改？

來源

2011-07-24 cnotethegr8

根據需要將jQuery的fadeTo()綁定到click/hover事件，而不是使用CSS。你也可以看看相關函數fadeIn（），fadeOut（）和fadeToggle（）。

$('input').hover(function(){ 
    $(this).fadeTo('slow', 0.75); 
}, 
function(){ 
    $(this).fadeTo('slow', 1.0); 
});

http://api.jquery.com/category/effects/fading/

來源

2011-07-24 16:40:42 KyleWpppd

由於某種原因，背景位置不工作，這不完全是我需要的，但它會做，直到我找出來。謝謝。 – cnotethegr8

你可以試試這個插件：http://plugins.jquery.com/project/bgImageTransition

來源

2011-07-24 16:08:46

看看這個

http://www.protofunc.com/scripts/jquery/backgroundPosition/

來源

2011-07-24 16:08:57 ShankarSangoli

看一看的animate function。

只是一個例子：

$('#myElement') 
    .css({backgroundPosition: "0 0"}) 
    .mouseover(function(){ 
     $(this).stop().animate(
      {backgroundPosition:"(0 -150px)"}, 
      {duration:200}) 
     }) 
    .mouseout(function(){ 
     $(this).stop().animate(
      {backgroundPosition:"(0 0)"}, 
      {duration:200}) 
     })

編輯：

當然，你必須添加的onClick事件也是如此。

來源

2011-07-24 16:10:33

我嘗試了許多不同的變化用動畫的。其他的風格下工作，如身高，但是當我嘗試backgroundPosition它dosnt工作... – cnotethegr8

好吧，也許我的回答是沒有經過深思熟慮足夠 - 可能是背景位置原本不起作用（我現在無法測試）。你是否已經嘗試了下面的插件（正如ShankarSangoli已經指出的那樣）？ http://plugins.jquery.com/project/backgroundPosition-Effect –

我沒有，現在嘗試它。但有可能它不工作，因爲即時通訊使用類和輸入，而不是一個ID？ – cnotethegr8

使用jQuery淡入淡出的動畫按鈕

回答

相關問題