jquery animate/mouseover/mouseout不起作用

當我將鼠標懸停在類爲'spring'的元素上時，我希望它轉換爲另一種顏色。我正在使用jQuery做這件事，但我似乎無法得到它的工作。任何人都可以爲我闡明這一點嗎？下面是我到目前爲止小提琴...提前jquery animate/mouseover/mouseout不起作用

jsfiddle

謝謝！

$('.spring').mouseover(function() { 
    $('.spring').animate({ 
     'backgroundColor' : '#CCCCCC' 
    }).mouseout(function() { 
    $('.spring').animate({ 
     'backgroundColor' : '#000000' 
    }); 
});

這是我至今對jQuery的代碼！

來源

2014-02-18 user3263978

一邊注意小提琴沒有包含jQuery ... – koosa

你的jsfiddle有錯誤，這裏是一個更新的（不做你想要的東西）http://jsfiddle.net/3f4RQ/2/ –

我更新小提琴做你想做的事，看我的回答 –

嘗試使用hover此：

$('.spring').hover(function() { 
    $('.spring').animate({ 
     'backgroundColor' : '#CCCCCC' 
    }); 
}, function() { 
    $('.spring').animate({ 
     'backgroundColor' : '#000000' 
    }); 
});

來源

2014-02-18 22:50:45

$(document).ready(function() { 
    $('.spring').hover(function() { 
     $('.spring').animate($(this).css({ 
      'background': '#CCCCCC' 
     })); 
    }, function() { 
     $('.spring').animate($(this).css({ 
      'background': '#000000' 
     })); 
    }); 
});

http://jsfiddle.net/3f4RQ/5/

來源

2014-02-18 22:53:18

我已經修改了你的小提琴

http://jsfiddle.net/3f4RQ/3/

$(document).ready(function() { 

    $('.spring').hover(function() { 
     $('.spring').animate({ 
      'backgroundColor': '#CCCCCC' 
     }) 
    }, 

    function() { 
     $('.spring').animate({ 
      'backgroundColor': '#000000' 
     }); 
    }); 
});

如果您仍然需要mouseover和mouseout事件，那麼您可以使用下面的代碼片段。 $（文件）。就緒（函數（）{

$('.spring').mouseover(function() { 
     $('.spring').animate({ 
      'backgroundColor': '#CCCCCC' 
     }) 
    }) 
.mouseout(
    function() { 
     $('.spring').animate({ 
      'backgroundColor': '#000000' 
     }); 
    }); 
});

此外，您需要jQuery UI的動畫backgroundColor屬性。

請標記爲答案，如果它幫助。

來源

2014-02-18 22:53:31

如果我理解正確，你希望盒子是紅色的，直到有人徘徊，然後變成灰色，然後變成黑色，而不是紅色。

我更喜歡讓CSS儘可能多地完成工作，因爲它經常處理得更快，更容易與之合作，特別是對於如此簡單的事情。在大多數情況下，CSS動畫可以替代jQuery的動畫功能。 jQuery只需要設置一個標誌，表示該框已被徘徊，然後在此之後就不再需要了。

的jQuery：

我使用更新後的「開啓」功能，鼠標懸停，所以你可以很容易地將其關閉在不需要的時候。這基本上是在第一次懸停時在箱子上設置一個班級。

$(document).ready(function() { 

    $('.spring').on('mouseover', function() { 
     $('.spring') 
     .addClass('touched') 
     .off('mouseover'); 
    }); 

});

CSS：

我發現動畫是平滑的，並允許使用CSS轉換，而不是jQuery的動畫更精細的控制。我們將懸停狀態設置爲灰色，將隱藏的類設置爲黑色，並且CSS中的所有內容都正確。

.spring { 
    background: red; 
    width: 100px; 
    height: 30px; 
    transition: background 0.5s ease 
} 
.spring:hover, .spring.touched:hover { 
    background: #ccc; 
} 
.spring.touched { 
    background: #000; 
}

這使您可以輕鬆控制外觀的每個方面，而無需將繁瑣的CSS代碼添加到jQuery中。

See the Fiddle here

只能有一個問題，在您使用它，檢查表CSS動畫的支持： http://caniuse.com/css-animation。我通常認爲過渡是一個「很好有」的項目，而不是一個必要的，所以我並不擔心IE9及以下版本不會看到過渡。他們仍然可以很好地改變顏色，所以沒有任何功能丟失。沒有在JavaScript中的所有垃圾的好處是值得的。

來源

2014-02-18 23:23:41 nwalton

你提出了一個關於過渡的強制性觀點，我理解得很好。我想做轉換，並排除IE8開發和下面所有的一起！然而，因爲這個網站是針對一個仍在使用IE8的小學，它教孩子們關於季節差異以及他們爲什麼如此行事的原因。一切都必須在IE8（該死的學校和他們的IE8）PERFECT PERFECT – user3263978

絕對可以理解。這就是爲什麼我在最後提出警告。它看起來可能有一個可行的[polyfill]（http://stackoverflow.com/questions/6974648/css3-transition-polyfill）過渡，但它也可能是有意義的堅持jQuery。 – nwalton

jquery animate/mouseover/mouseout不起作用

回答

相關問題