This one has be stumped. I'm adding some HTML to a element and then want to fade it in. However, when implemented, it doesn't fade in. It just 'snaps' in immediately. The syntax/order looks right. Anyone see anything wrong with my logic:
$('span.mySpan')
// fade out the empty span so it's hidden
.fadeOut('fast',function(){
$(this)
.html($restoreLink) // add the HTML to the hidden span
.fadeIn('slow') // now fade it in
})
Do you need the semicolon at the end of fadeIn line and at the end of the function? --> ;
$('span.mySpan')
// fade out the empty span so it's hidden
.fadeOut('fast',function(){
$(this)
.html($restoreLink) // add the HTML to the hidden span
.fadeIn('slow'); // added ;
}); // added ;
Are you using Internet explorer 8? I believe that opacity manipulations with JQuery in IE8 do not work properly.
It does work here's what I used:
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script>
$(document).ready(function() {
$('span.mySpan')
// fade out the empty span so it's hidden
.fadeOut('fast',function(){
$(this)
.html('<strong>testing</strong>') // add the HTML to the hidden span
.fadeIn(2000) // now fade it in
})
});
</script>
</head>
<body>
<span class="mySpan">Hello</span>
</body>
</html>
It just fades in really fast. Set the timer to say... 5000 milliseconds to see what I mean.