jquery hover動畫不起作用

-1

$(document).ready(function(){ 
    $("h1").hover(function(){ 
     $(this).animate({'color' : 'red'}, "fast"); 
    }, 
    function(){ 
     $(this).animate({'color' : 'white'}, "fast"); 
    }); 
});

我希望h1標記內的文本的顏色在我將鼠標懸停在其上時變爲紅色。當鼠標離開h1標籤時，我想要文本再次變成白色。有人可以修復我的代碼嗎？jquery hover動畫不起作用

來源

2013-08-16 Sven Gaat

您必須包含jQuery UI腳本。 –

哪些部分正在工作，哪些不是？你有沒有測試過，以確保選擇器的功能和任何一個懸停功能正在發射？ – Maslow

@Maslow他所需要的只是jQuery UI。他的劇本很好。 – MisterBla

你不能用jQuery來動畫顏色。

爲了給顏色添加動畫，您需要包含jQuery UI。

使用下面的HTML：

<h1>A header</h1> 
<h1>Another header</h1> 
<h1>And another header</h1> 
<h2>A h2</h2>

和你的Javascript：

$(document).ready(function(){ 
    $("h1").hover(function(){ 
     $(this).animate({color : 'red'}, "fast"); 
    }, 
    function(){ 
     $(this).animate({color : 'white'}, "fast"); 
    }); 
});

這裏是一個demo。

來源

2013-08-16 14:08:35 MisterBla

從documentation ：

注：jQuery UI項目允許一些非數字的風格，如顏色來進行動畫擴展.animate()方法。該項目還包括通過CSS類指定動畫而不是單獨屬性的機制。

包括jQuery用戶界面在你的頁面的jQuery加載後：

http://code.jquery.com/ui/1.10.3/jquery-ui.js

你<head>看起來就像這樣：

<!-- Load jQuery --> 
<script src="http://code.jquery.com/jquery-1.9.1.js"></script> 
<!-- Load jQuery UI --> 
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

那麼動畫會工作。

JSFIDDLE

來源

2013-08-16 14:08:38

jquery hover動畫不起作用

回答

相關問題