Jquery fading in/out

Question

I need help on this project. http://natur-perlen.dk/

The menu has a jquery function which allow picture to be displayed when moving mouse over the menu. I need the pictures to fade in and out, not like it is now. More like the slider. Here is the code:

<script>
    var sourceSwapOut = function () {
        $("#slider").css('backgroundImage','url(image/Image-standard.png)');
    }
    var sourceSwap = function () {
        var $this = $(this);
        var newSource = $this.attr('data-id');

        $("#slider").css('backgroundImage','url(' + newSource +')');
    }

    $(function () {
        $('li.imageHandler').hover(sourceSwap, sourceSwapOut);
    });
</script>

<nav id="menu">
    <div id='cssmenu'>
        <ul>
            <li class="img1">
                <a href='#'><span>Lejlighed og værelser</span></a>
                <ul>
                    <li class="imageHandler" data-id="image/retro.png">
                        <a href='retro.html'><span>Retro</span></a>
                    </li>
                    <li class="imageHandler" data-id="image/udsigtenslider.png">
                        <a href='hyggen.html'><span>Hyggen</span></a>
                    </li>
                    <li class="imageHandler" data-id="image/Hemsen.png">
                        <a href='hemsen.html'><span>Hemsen</span></a>
                    </li>
                    <li class="imageHandler" data-id="image/udsigtenslider.png">    
                        <a href='udsigten.html'><span>Udsigten</span></a>
                    </li>
                    <li class="imageHandler" data-id="#">
                        <a href='rooms.html'><span>Værelserne</span></a>
                    </li>
                </ul>
            </li>
            <li class="imageHandler" data-id="image/Kvalitet-og-miljoe.png">
                <a href='kvalitetogmiljoe.html'><span>Kvalitet og Miljø</span></a>
            </li>
            <li class="imageHandler" data-id="image/image-aktiviteter.png">        
                <a href='aktiviteter.html'><span>Aktiviteter og arragementer</span></a>
            </li>
            <li class="imageHandler" data-id="image/Priser-og-Booking.png">
                <a href='booking-og-priser.html'><span>Priser og booking</span></a>
            </li>
            <li class="imageHandler" data-id="image/gaestebog.png">
                <a href='gaestebog.html'><span>Gæstebog</span></a>
            </li>
            <li class="imageHandler" data-id="image/Kontakt-os.png">
                <a href='kontakt.html'><span>Kontakt</span></a>
            </li>
        </ul>
    </div>
</nav>

Hope to find help here.

Answer 1

Well implement it in the same way you have the slider.

You could also use the #header as the default background. Set the opacity of #slider to 0 with CSS (you should probably move the logo up one level so it stays visible). When the user hovers over a link simply set the background and fade in the #slider then fade it back out when the user stops hovering.

There are many ways you can implement this. The key thing to note is that you need multiple elements so you can control their opacity to make them fade in and out.

Answer 2

I use animation method for this purpose, try this code:

var sourceSwapOut = function () {
    $('#slider').stop().animate({'opacity': 0}, 500, function(){
        $("#slider").css('backgroundImage','url(image/Image-standard.png)').stop().animate({'opacity': 1}, 500);
    });
}

var sourceSwap = function () {
    var $this = $(this);
    var newSource = $this.attr('data-id');
    $('#slider').stop().animate({'opacity': 0}, 500, function(){
        $("#slider").css('backgroundImage','url(' + newSource +')').stop().animate({'opacity': 1}, 500);
    });

}

Answer 3

I suggest you use css3 for this

.image{ 
    opacity: 0; 
    transition: opacity 0.5s;
}
.image.Hovered{
    opacity: 1;
}

$('elem').on('mousein', function(){  $(this).addClass('Hovered'); }
$('elem').on('mouseout', function(){ $(this).removeClass('Hovered'); }