Question

I’ve not any experience with jquery or java script – sorry!

I have an aspx page with a flash animation. If flash is not available then it displays a static image instead. I’d like the image to fade in. Currently this doesn’t work. I’ve even tried just hiding the image using $(imgConnect).hide(); but that doesn’t work either! The page is in a web app and I’m developing in VS 2010. I did add some sample jquery in another page of the same web app and that worked ok, using the same jquery library reference.

Can anyone please help?

<div id="flash">
    <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="600" height="197" id="myFlashContent">
            <param name="movie" value="intro.swf" />
            <!--[if !IE]>-->
            <object type="application/x-shockwave-flash" data="intro.swf" width="600" height="197">
            <!--<![endif]-->

                <img id="imgConnect" src="images/letsconnect.png" alt="Let's Connect" title="Let's Connect" />
                <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>

                <script type="text/javascript">

                    $("imgConnect").hide().fadeIn("slow", function () { });

                </script>
            <!--[if !IE]>-->
            </object>
            <!--<![endif]-->
        </object>
</div>

Answer 1

Here is a working example: http://jsfiddle.net/JptBV/1/

You need to make the image hidden at first

<img id="imgConnect" src="images/letsconnect.png" style="display:none" />

and then you can display it later

$(document).ready(function(){
    $("#imgConnect").fadeIn('slow');
});