Clever Geek Handbook

Fading content on hover of <li> menu

I have a problem and I need your help.

So, I am trying to create a menu that displays content when you hover over the li tag. And the first content should always be displayed when you click on the first li option or when nobody hangs.

I tried to do this and you can see a demo here: https://jsfiddle.net/sqftzuja/

As you can see, it doesn't work that well and it shows more than one content several times.

My script

$(document).ready(function() {
  $("#nav3 li:first-child").addClass("tab-active");
  $('#nav3 li').click(function() {


    var section4 = $(this).attr('data-id');
    $("#nav3 li").removeClass("tab-active");
    $(this).addClass("tab-active");

    $('.tv-corporativa').hide(); 
    $(section4).fadeIn(800);

   });
});

If anyone can help me improve it, it will help me a lot!

Thanks in advance!

+3


source to share


3 answers


jquery hover

takes two arguments, one for the pointer to enter the element and the other for when it leaves the element.

eg.

$('selector').hover(one_function, two_function)


you can use hover and call the second function or use event onmouseover

.

here's a fiddle for onmouseover https://jsfiddle.net/sqftzuja/1/

+1


source


The code is correct. You just need a stop

running animation.

$(section4).stop( true, true ).fadeIn(800);



This will fix the problem in the old code.

0


source


you should stop fading in animation. When you fade into it, the effects are after the specified interval. Updated violin also

$(document).ready(function() {
   $("#nav3 li:first-child").addClass("tab-active");
    $('#nav3 li').hover(function() {

    //console.info(  $(this).attr('href') );
    var section4 = $(this).attr('data-id');
    $("#nav3 li").removeClass("tab-active");
    $(this).addClass("tab-active");

    $('.tv-corporativa').stop().hide(); 
    $(section4).fadeIn(800);

  });
});
0


source






More articles:


All Articles