[英]jQuery Animation not working in IE9 & Firefox 5
這是消息來源,我有什么遺漏嗎?
我在這里嘗試過 ,並且可以使用,但是在我的PC上無法使用。
- 編輯
我使用的是jquery min v1.4.1,它無法正常工作,因此我在使用Google的jquery SDN v1.5.1的鏈接上下載了最新版本,但仍無法正常工作。
<html>
<head>
<title>Test</title>
<script src="jquery-1.6.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$('document').ready(function() {
$('#bio > div').hide();
$('#bio > div:first').show();
});
$('#bio h3').click(function() {
alert('called');
$(this).next().animate(
{'height':'toggle'}, 'slow', 'swing'
);
});
$('p:first').animate(
{
height: '+=100px',
backgroundColor: 'green'
},
{
duration: 'slow',
easing: 'swing',
complete: function() {alert('done!');},
queue: false
}
);
</script>
</head>
<body>
<div id="bio">
<h2>Who’s Hot Right Now?</h2>
<h3>Beau Dandy</h3>
<div>
<img src="../images/beau_100.jpg" width="100"
height="100" alt="Beau Dandy"/>
<p>Content about Beau Dandy</p>
</div>
<h3>Johnny Stardust</h3>
<div>
<img src="../images/johnny_100.jpg" width="100"
height="100" alt="Johny Stardust"/>
<p>Content about Johny Stardust</p>
</div>
<h3>Glendatronix</h3>
<div>
<img src="../images/glenda_100.jpg" width="100"
height="100" alt="Glendatronix"/>
<p>Content about Glendatronix</p>
</div>
</div>
</body>
</html>
我認為您的document.ready
太早關閉了。
我只是移動了括號});
到腳本結尾...
<script type="text/javascript">
$('document').ready(function() {
$('#bio > div').hide();
$('#bio > div:first').show();
$('#bio h3').click(function() {
alert('called');
$(this).next().animate(
{'height':'toggle'}, 'slow', 'swing'
);
});
$('p:first').animate(
{
height: '+=100px',
backgroundColor: 'green'
},
{
duration: 'slow',
easing: 'swing',
complete: function() {alert('done!');},
queue: false
}
);
});
</script>
為什么? 例如,您嘗試將#bio h3
.click()
類的事件綁定到名為#bio h3
的元素。 但是,由於您正在<head>
調用腳本,因此#bio h3
元素可能甚至在DOM中都不存在。 使用document.ready
可確保DOM在執行其中的代碼之前存在。
為什么在某些瀏覽器中起作用,可能是一個簡單的計時問題。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.