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

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