javascript - show and hide div using jquery, same as mashable.com website

Question

http://mashable.com/

I have this script:

$(document).ready(function(){
    $(".show_hide5").mouseover(function(){
        $('.selected').removeClass('selected');
        $(this).next().fadeIn("slow").addClass('selected');
        $(".slidingDiv5").not('.selected').fadeOut("slow");
    });

    $('.selected').removeClass('selected');
    $(this).next().fadeIn("slow").addClass('selected');
    $(".slidingDiv5").not('.selected').fadeOut("slow");
});

and this script is working well so far, but it's still missing something, for now it's show the div on mouseover on the arrow as you can see on mashable website but the share area don't hide on mouseout only it's hide once you put the mouse on another arrow.

all i need is to hide the share area on mouseout.

thanks in advance.

Answer 1

如果我理解得很好，你想淡出.slidingDiv5事件mouseleave：

$(document).ready(function(){
   $(".show_hide5").mouseover(function(){
       $('.selected').removeClass('selected');
       $(this).next().fadeIn("slow").addClass('selected');
       $(".slidingDiv5").not('.selected').fadeOut("slow");
   });
   $(".show_hide5").mouseleave(function(){
       $(".slidingDiv5").fadeOut("slow");
   });
});