Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Mar 2010
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Image FadeIn mouseover jquery

    I need to get these images to fade in above said image when I move my mouse over them with jquery; can anyone help?


    Here's the code:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script language="javascript" src="jquery-1.3.2.js"></script>
    <title>Picture Gallery</title>
    <script language="javascript">
    $(document).ready(function(){
    $("ZooZebra.gif", "tiger.jpg", "graff.jpg", "boys with dog.jpg").hover(function(){
    //perform fadeIn here
    $('zebra').fadeIn("slow");
    $('tiger').fadeIn("slow");
    $('graff').fadeIn("slow");
    $('boysdog').fadeIn("slow");
    });

    });
    </script>
    </head>

    <body>
    <p>&nbsp;</p>
    <hr />
    <p>&nbsp;</p>
    <div class="hover">
    <p><img src="ZooZebra.gif" alt="" width="50" height="50" class="zebra" /></p>
    <p><img src="tiger.jpg" alt="" width="50" height="50" class="tiger" /></p>
    <p><img src="graff.jpg" alt="" width="50" height="50" class="graff" /></p>
    <p><img src="boys with dog.jpg" width="50" height="50" class="boysdog" /></p>
    </div>
    </body>
    </html>

  • #2
    New Coder
    Join Date
    Mar 2010
    Location
    nyc
    Posts
    31
    Thanks
    0
    Thanked 1 Time in 1 Post
    Make sure you're using jQuery 1.4.2

    Take this out.
    ------------------------------

    <script language="javascript">
    $(document).ready(function(){
    $().hover(function(){
    //perform fadeIn here
    $('zebra').fadeIn("slow");
    $('tiger').fadeIn("slow");
    $('graff').fadeIn("slow");
    $('boysdog').fadeIn("slow");
    });

    });
    </script>
    -----------------------
    and replace it with

    <script language="javascript">
    $(document).ready(function(){
    $(".zebra, .tiger, .graff, .boysdog").hover(
    function(){ $(this.fadIn('fast'); }, function() { $(this).hide(); } );

    });
    </script>


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •