當鼠標懸停時爲div設置動畫顏色

我正在嘗試的這個腳本不起作用。任何想法如何解決它？

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.js" type="text/javascript"></script> 
    <script type="text/javascript"> 
    $("#arrow-l").hover(
    function() { 
     $(this).stop().animate({"background-color": "#999999"}, "slow"); 
    }, 
    function() { 
     $(this).stop().animate({"background-color": "#BFBFBF"}, "slow"); 
    }); 
    </script> 
    </head> 
... 
    <body> 
    <div id="arrow-l">prev.</div>

來源

2012-02-18 GibboK

背景顏色動畫將無法使用jQuery動畫。你必須使用jQuery UI或使用jQuery顏色動畫插件。

jQuery animate backgroundColor

http://www.bitstorm.org/jquery/color-animation/
http://docs.jquery.com/UI/Effects/ColorAnimations

來源

2012-02-18 16:44:46

感謝您的解釋！ – GibboK 2012-02-18 19:00:27

不客氣！ – 2012-02-18 19:05:15

你只是想改變背景顏色？

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.js" type="text/javascript"></script> 
    <script type="text/javascript"> 
$(function() { 
    $('#arrowl').hover(function(){ 
     $(this).css('background-color', '#F00'); 
    }, 
    function(){ 
     $(this).css('background-color', '#E0EAF1'); 
    }); 
}); 

    </script> 
    </head> 
... 
    <body> 
    <div id="arrowl">prev.</div>

來源

2012-02-18 16:46:28 June

不工作，任何想法，它應該做一個動畫 – GibboK 2012-02-18 16:50:20

從jQuery的API文檔：

所有動畫處理的屬性應該被動畫化以單一數值，除了下面指出的;大多數非數字屬性不能使用基本jQuery功能進行動畫（例如，寬度，高度或左側可以是動畫，但背景色不能爲，除非使用jQuery.Color（）插件）。

也許這會有所幫助。使用opacy e。 G。爲我工作得很好。

來源

2012-02-18 16:49:17 m02ph3u5

-1

參考LIVE DEMO AT JSFIDDLE

$("#arrow-l").hover(
    function() { 
     $(this).css({'background-color': '#999999'}); 
    }, 
    function() { 
     $(this).css({'background-color': '#BFBFBF'}); 
    } 
); 


<div id="arrow-l">prev.</div>

來源

2012-02-18 18:15:20

當鼠標懸停時爲div設置動畫顏色

回答

相關問題