徘徊CSS上的背景圖像

$(function(){ 
    $('#product .btn-purchase') 
      .mouseover(function(){ 
       $(this).stop().animate($(this).addClass('.btn-purchase-hover'), {duration:500}) 
      }) 
      .mouseout(function(){ 
       $(this).stop().animate($(this).removeClass('.btn-purchase-hover'), {duration:500}) 
    }); 
});

..不知道爲什麼這不起作用，我做錯了什麼？徘徊CSS上的背景圖像

來源

2013-03-03 3zzy

你爲什麼不使用'：hover'僞類？您無法使用javascript爲類添加動畫。 – 2013-03-03 20:08:46

我知道，這不完全是你的問題的答案。但正如Jan評論過的，你可能會考慮在css中實現這一點。

只給你一個想法，它可能是什麼樣子：

#product .btn-purchase{ 
    background-color: blue; 
    transition: all 1s ease-in; 
    -webkit-transition: all 1s ease-in; 
    -moz-transition: all 1s ease-in; 
} 


#product .btn-purchase:hover{ 
    background-color: red; 
}

來源

2013-03-03 20:51:07 Alex

您需要使用的document.ready所以你的代碼運行後的DOM完全加載，這樣的：

$(document).ready(function() { 
    $('#product .btn-purchase') 
      .mouseover(function(){ 
       $(this).stop().animate($(this).addClass('.btn-purchase-hover'), {duration:500}) 
      }) 
      .mouseout(function(){ 
       $(this).stop().animate($(this).removeClass('.btn-purchase-hover'), {duration:500}) 
    }); 
});

來源

2013-03-03 20:05:28 Axel

'$（func）'是'$（document）.ready（func）'的別名。他已經在等待document.ready – 2013-03-03 20:07:42

將函數傳遞給$（）基本上做同樣的事情。 – 2013-03-03 20:08:42

不錯，你每天都會學到一些東西：P – Axel 2013-03-03 20:09:12

的動畫功能主要適用於數字CSS屬性。

的細節，你可以看看這裏：http://api.jquery.com/animate/

編輯：我會建議你在jQuery的使用淡入/出方法來代替。例如，你可以做如下的事情。（代碼把我的頭頂部，假設你與.btn購買後的正確的圖像在div）

$(function(){ 
    $('#product .btn-purchase') 
      .mouseover(function(){ 
       var $this = $(this); 
        $this.fadeOut(function(){ $this.next().fadeIn(); }); 
      }) 
      .mouseout(function(){ 
        $this.fadeOut(function(){ $this.prev().fadeIn(); }); 
    }); 
});

我還想補充一點，櫃面你是不是支持 IE，然後使用CSS轉換可能有幫助。

看一看這個答案animating addClass/removeClass with jquery，因爲它肯定是在我看來，一個更好/更有效的方法

Shreyasň

來源

2013-03-03 20:07:59 JustShrey

JQuery的動畫用於動態CSS屬性，而不是類。正如this答案所示，更好的方法可能是使用CSS轉換（如果您只支持CSS3）。或者，如果您想動畫很多東西，則需要將它們作爲.animation()方法中的CSS屬性提供。

希望解決您的問題。

來源

2013-03-03 20:12:00

徘徊CSS上的背景圖像

回答

相關問題