tags:

views:

292

answers:

3

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 
    })
A: 

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 ;
Matt Crest
No; otherwise, it wouldn't appear at all.
SLaks
Ahh...this is true.
Matt Crest
A: 

Are you using Internet explorer 8? I believe that opacity manipulations with JQuery in IE8 do not work properly.

dbrien
it's consistent in all browsers (IE, Firefox, Chrome, Safari).
DA
One thing I noticed is that, at least for IE8, it only works under certain DOCTYPEs and mainly those that force it into Quirks mode.
dbrien
+2  A: 

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.

Mike Thomsen
well, I have no idea what I did, but now it's working. ARGH! Anyways, you got me thinking to move things around to test and somehow doing that fixed it all.
DA