jQuery Animation not working in IE9 & Firefox 5
Question
Here's the source, am I missing something?
I tried it here , and it works, but on my PC it's not working.
--EDIT
I used jquery min v1.4.1, it didn't work, so I downloaded latest version, still not working, on the link I used google's jquery SDN which is 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>
1 answers
solution1
1 ACCPTED 2011-08-31 14:05:11
I think your document.ready was being closed too soon.
I simply moved the brackets }); to the end of your 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>
Why? For example, you're trying to bind events like .click() to an element called #bio h3 . However, the element #bio h3 might not yet even exist yet in the DOM since you're calling the script in the <head> . Using document.ready ensures the DOM exists before executing the code within.
Why it works in some browsers is likely a simple timing issue.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.