CODEWITHSUNDEEP
javascriptjquerycss
user3822370
user3822370

Reputation: 647

jQuery menu slide hover glitch

I made a menu with < divs > and am using mouseover mouseout functions to append and remove a tongue (like a description for each menu icon). The issue I am having is when I hover over the tongue, it executes (correctly) the mouseout function for the button and removes the tongue.

How can I prevent this? Thank you!

http://jsfiddle.net/QZ75D/

$('#wrapper').on('mouseover', '.1, .2, .3, .4, .5', function(){
    var tongue = '<div class = "tongue">'+$(this).attr('value')+'</div>';
    $(tongue).appendTo($(this)).animate({width:"toggle"});
});
$('#wrapper').on('mouseout', '.1, .2, .3, .4, .5', function(){
    var that = $(this);
    $('.tongue').animate({width:"toggle"},function(){
        that.children('.tongue').remove();
    });
});

Bonus: The text also is affected by the width animation. Any way to fix that?

Upvotes: 1

Views: 540

Answers (2)

Alon Dahari
Alon Dahari

Reputation: 1147

You don't really need JavaScript for this, depending on the level of support you need.
I made an example in which I altered the HTML structure a bit, to make it a bit more semantic IMO.
Animation wouldn't work in old IE, but functionality will (IE8).

HTML:

<ul class='wrapper'>
    <li class="button">Test</li>
    <li class="button">Test</li>
    <li class="button">Test</li>
    <li class="button">Test</li>
    <li class="button">Test</li>
</ul>

CSS:

.wrapper {
    width:50px;
    margin-left:40%;
    list-style: none;
    counter-reset: button-number
}

.button {
    counter-increment: button-number;
    width:50px;
    height:50px;
    background-color:#ccc;
    float: left;
    cursor:pointer;
    position: relative;
}

.button:before, .button:after {
    content:"Button number " counter(button-number);
    width:300px;
    height:50px;
    position:absolute;
    right: 50px;
    visibility: hidden;
}

.button:before {
    -webkit-transform: scaleX(0);
    -webkit-transform-origin: left;
    transform: scaleX(0);
    transform-origin: left;
    background-color:#000;
    color:#fff;
    -webkit-transition: -webkit-transform .4s, visibility 1s;
    transition: transform .4s, visibility 1s;
}

.button:hover:before {
    visibility: visible;
    -webkit-transform: scaleX(1);
}

.button:hover:after {
    width: 300px;
}

jsfiddle

Notes:

  • The :after element is there to prevent the "tongue" from disappearing if the mouse leaves immediately to the left.
  • Animating transform instead of width is better for performance (element is not re-drawn) and eliminates weird text-wrapping during the animation.

Upvotes: 1

Imran Bughio
Imran Bughio

Reputation: 4941

DEMO

You can do the following to make your code work as expected.

  • Use mouseleave event instead of mouseout this will make sure child elements are detected as part of parent element and the event will only trigger when mouse leave element and it's child element.

  • Similarly change mouseover event with mouseenter this event will only trigger if cursor enter element or its child.

  • To avoid text from collapsing use white-space: nowrap; on .tongue class.

JS:

$('#wrapper').on('mouseenter', '.1, .2, .3, .4, .5', function () {
    var tongue = '<div class = "tongue">' + $(this).attr('value') + '</div>';        
    $(tongue).appendTo($(this)).animate({
        width: "toggle"
    });
});
$('#wrapper').on('mouseleave', '.1, .2, .3, .4, .5', function () {
    var that = $(this);
    $('.tongue').animate({
        width: "toggle"
    }, function () {
        that.children('.tongue').remove();
    });
});


P.S: Try to avoid class names like .1, .2, .3 they might work in java-script but they wont work in CSS.

CSS does not allow class names which start with numbers, instead you can try .n_1, .n_2, .n_3 ....

Upvotes: 1

Related Questions