Question

I am trying to copy the HTML from the title and description spans within each li into the info div below. Preferably appending h2 tags around the title whilst fading it in. If another li is hovered the current selection should fade out and the new one fade in…

HTML

   <li>
        <a class="sales1" href="#"><img alt="Sales" src="sample.png">
        <span class="drinkTitle">Test Title<span>
        <span class="drinkDesc">A test Description</span></span></a>
    </li>

<div id="drinksInfo"></div>

JQUERY

$('#drinksList ul li img').hover(function () {
      var str = $(this).siblings('.drinksTitle').text();
          $('#drinksInfo').html(str).fadein();
});

Any help would be appreciated.

Answer 1

Live Demo

    $('li').mouseover(function () {   
        var title = $(this).find('.drinkTitle').text(),
            descrip = $(this).find('.drinkDesc').text();

    if(!$(this).hasClass('selected')){
        $('.selected').removeClass('.selected');
        $(this).addClass('.selected');

        $('#drinksInfo').fadeOut(500, function(){
            $('#drinksInfo').html('<h2>' + title + '</h2>' + descrip).fadeIn(); 
        });  
    }
}
);