8

I have a problem with this JQuery code:

$(".item").mouseenter(function(){
    $(this).addClass("active");
    $(this).removeClass("item");
    $(".item").hide(700);
}).mouseleave(function(){
    $(this).stop();
    $(this).addClass("item");
    $(this).removeClass("active");
    $(".item").show(700);
});

and this is my HTML:

<ul>
    <li class="item">Item</li>
    <li class="item">Item</li>
    <li class="item">Item</li>
    <li class="item">Item</li>
    <li class="item">Item</li>
</ul>

I want when I do hover on one item, other items be hide, the code works fine but the problem is there if I hover another item in duration of hiding (700 ms), it will make a loop of hide/show items. what can I do for prevent this.

jsFiddle

note: I want the hovered item goes to left, not stay fixed.

Mohsen Safari
  • 6,669
  • 5
  • 42
  • 58
  • bad UI concept simply because you can't avoid hovering another due to floats. As they animate they shift positions. WOuld animating opacity work for you? – charlietfl Nov 02 '13 at 17:11

1 Answers1

3

You were using float: left to the li elements.. so the ul was with no width and height. Apply this CSS:

ul {
    overflow: auto;
}

and also I made some changes in jQuery:

$(".item").on('mouseenter', mEnter)
$('ul').on('mouseleave', function () {
    $('.item').stop();
    $('.active').removeClass("active")
        .addClass("item");
    $(".item").show(700);
});

function mEnter() {
    $(this).addClass("active");
    $(this).removeClass("item");
    $(".item").hide(700);
}

you were applying mouseleave event to the individual hovered LI element instead of the parent element i.e UL.

Working Fiddle

Mr_Green
  • 40,727
  • 45
  • 159
  • 271