使用 css 樣式進行動畫處理

Question

懸停時是否可以使用 jQuery 淡化一種樣式的所有 css 屬性的動畫？ 我的意思是，如果您定義了一種樣式及其：hover state 僅與 css 一起使用，則執行 Z65E8800B5C68A266AZ 的腳本例子：

.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 styles？

Answer 1

You could replace your hover css with a class and use the jquery UI ToggleClass animation:

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;
});

If you want to use both the css hover and the javascript hover, I guess you will have to cancel the default action in the javascript hover function.

編輯：要回答您的其他問題，上面的 javascript 將應用於所有帶有.button1 class 的按鈕，但如果您也想將其添加到.button2 ，您可以使用例如：

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

Answer 2

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

Answer 3

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

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

此外，您還可以使用 css3 過渡，但它們尚未得到大規模支持，因此除非您知道您的觀眾總是更新他們的瀏覽器，否則使用 jQuery 動畫會更安全。 :P