Fade in img on mouseover - Fullscreenr - jQuery

Question

I am looking to fade in an img (#bgimg) on mouseover of each individual anchor in my main nav. I would like a different img for each anchor. I am using the plug-in Fullscreenr and have four different img's each relating to a link with-in my main nav. On mouseout I would like it to go back to the original img. I only want to do this on my home page. Below is a link to the page I would like to use it on and a snip-it of my mark-up:

http://tamedia.ca/marlowe/home.html

<body>
  <img id="bgimg" src="img/bg-home.jpg" />

  <div id="container">
  <header>      
       <nav>
        <ul>
          <li><a href="brand.html">BRAND</a></li>
          <li><a href="collection-aw12.html">COLLECTION</a></li>
          <li><a href="boutiques.html">BOUTIQUES</a></li>
          <li><a href="contact.html">CONTACT</a></li>
        </ul>
       </nav>
    </header>
 </div>
</body>

I'm not quite sure where to start. My knowledge of jQuery is very weak and was hoping someone could provide me with the script to make it happen. Any help would be greatly appreciated. — Tyler Almond, Sep 06 '12 at 23:52

harrypujols · Answer 1 · 2012-09-07T01:04:48.543

Well, I can't provide you a script to solve your problems, for that you'll have to do your homework, but here's a little walkthrough of what you could do. First add classes or ids to your list items. Something like this:

<li><a href="brand.html" id="brand">BRAND</a></li>

And, maybe at the bottom, before the body tag, or wherever you have your javascript you can add something like this:

<script>
  $(document).ready(function() {

      //selects the element with the id of brand on mousein
      $('#brand').hover(

             function() {
             //replaces the image on the element bgimg with one called bg-brand.jpg
                $('#bgimg').attr('src', 'img/bg-brand.jpg');
             //fades in the image
                $('#bgimg').fadeIn("slow");
             }, 
             function () {
             //returns to its original background image after the mouseout
                $('#bgimg').attr('src', 'img/bg-home.jpg');
             //fades out the image
                $('#bgimg').fadeOut("slow");
             }
      );

  })(jQuery);
</script>

This example only flips the background image of the first anchor, but if this works, I guess you know the drill. To fade in/out the images requires some extra coding.

Thanks, that works great but I was really hoping to have the images fade in and out. How would I go about adding a nice fade? — Tyler Almond, Sep 07 '12 at 01:08

score 0 · Accepted Answer · answered Sep 07 '12 at 20:04

Here is what I ended up using:

$(function () {

    $('#brand-nav').hover(function () {
        $('#bgimg').fadeOut('fast', function () {
            $('#bgimg').attr( 'src', 'img/bg-brand.jpg' );
            $('#bgimg').fadeIn('slow');
        });
    }, function () {
        $('#bgimg').fadeOut('fast', function () {
            $('#bgimg').attr('src', 'img/bg-home.jpg' );
            $('#bgimg').fadeIn('slow');
       });
    });       

});

Fade in img on mouseover - Fullscreenr - jQuery

2 Answers2