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.

http://stackoverflow.com/search?q=jquery+cross+fade+background+image — ksloan, Aug 11 '14 at 09:59

score 1 · Accepted Answer · answered Aug 11 '14 at 09:58

1

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'); }

answered Aug 11 '14 at 09:58

Martijn

15,791
4
36
68

Hello sorry for the late reply, but ive tried every solutions added in here, Ive not had succcess with adding this to the code, still not working as wanted. Maybe im doing it wrong. I did add the .image in the CSS and the jq in the script. ? – ms9778 Aug 14 '14 at 11:07

score 0 · Answer 2 · answered Aug 11 '14 at 10:11

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);
    });

}

score 0 · Answer 3 · answered Aug 11 '14 at 10:13

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.

Jquery fading in/out

3 Answers3