使用jQuery淡化CSS樣式懸停狀態的動畫

使用jQuery淡入淡出所有CSS樣式的CSS特性是否可能徘徊？我的意思是，如果你已經定義了一個風格和它的：只有CSS的懸停狀態，腳本才能完成剩下的工作。例如：使用jQuery淡化CSS樣式懸停狀態的動畫

.button1 { 
background: url(img1.jpg) repeat-x top left; 
color: #000; 
} 
.button1:hover { 
background: url(img2.jpg) repeat-x top left; 
color: #F00; 
}

如果你希望jQuery腳本對許多類似的按鈕做同樣的事情，有可能嗎？或者唯一的方法是定義兩種不同的CSS樣式？

來源

2011-07-02 Bobi

你可以用類代替你的懸停CSS和使用jQuery UI的ToggleClass動畫：

CSS：

.button1:hover, 
.button1_hover_class { 
    background: url(img2.jpg) repeat-x top left; 
    color: #F00; 
}

的javascript：

$(".button1").hover(function() { 
    $(this).toggleClass("button1_hover_class", 1000); 
    return false; 
});

如果你想同時使用CSS懸停和JavaScript懸停，我想你將不得不ca刪除javascript hover函數中的默認操作。

編輯：爲了回答您的其他問題時，JavaScript以上將被應用到所有按鈕與.button1類，但如果你想將其添加到.button2也可以使用，例如：

$(".button1, .button2").hover(function() {

來源

2011-07-02 17:12:29 jeroen

我想這是問題的核心。非常感謝！ – Bobi

您將使用animate方法更改css並將其綁定到懸停事件。

來源

2011-07-02 17:04:07

是的，但想法是通過CSS添加更改。不管怎麼說，還是要謝謝你！ – Bobi

例如，您應該嘗試選擇類$(".animates").hover(function(e){})的所有元素，並在懸停處理程序中使用e.target上的.animate() method from jQuery。例子：

<div class="animates">Lipsum</div> 
<script> 
     $(".animates").hover(function(e){ 
      $(e.target).animate(); 
     }); 
</script>

此外，您還可以使用CSS3過渡，但他們沒有大量的支持還，所以它的安全留在jQuery的動畫，除非你知道你的觀衆隨時更新他們的瀏覽器。：P

來源

2011-07-02 17:13:40

是的，正確！無論如何，這是一個好主意:) – Bobi

使用jQuery淡化CSS樣式懸停狀態的動畫

回答

相關問題