CODEWITHSUNDEEP
jqueryjquery-ui
user1885099
user1885099

Reputation: 150

jquery/ui menu mouseover/out/click animation issue

I ran into a problem while trying to create a navigation menu. I defined three function using jqueryui, an onmouseover function, an onmouseout function and an onclick function. The first to are used to emulate a hover effect and the last one to change selections. It all works great unless I remove the mouse from the clicked option, before the select animation finishes.

Here is the code:

HTML

<ul id="inav">
    <li class="opt selected">Option1</li>
    <li class="opt">Option2</li>
    <li class="opt">Option3</li>
    <li class="opt">Option4</li>
    <li class="opt">Option5</li>
</ul>

CSS

body
    {
        background: #000;
    }
#inav
    {
        display: block;
        width: 300px;
        height: 400px;
        float: left;
        margin: 0;
        padding: 0;
        padding-top: 60px;
        background: url('../img/nbg.png');
    }
.opt
    {
        display: block;
        width: 100%;
        height: 40px;
        list-style: none;
        color: #FFF;
        font-size: 1.7em;
        text-align: center;
        cursor: pointer;
        padding-top: 10px;
        text-shadow: 0 0 1px #FFF;
    }
.selected
    {
        background: #00F;
    }

Jquery

$('.opt').mouseover(function(){
    $(this).animate({backgroundColor: '#F00'}, 400 );
});
$('.opt').mouseout(function(){
    if($(this).hasClass('selected'))
    {
        $(this).animate({backgroundColor: '#00F'}, 400 );
    }
    else
    {
        $(this).animate({backgroundColor: 'transparent'}, 400 );
    }
});
$('.opt').click(function(){
    if(!$(this).hasClass('selected'))
    {
        $('.selected').animate({backgroundColor: 'transparent'}, 400, function(){
            $('.opt').removeClass('selected');
        });
        $(this).animate({backgroundColor: '#00F'}, 400, function(){
            $(this).addClass('selected');
        });
    }
});

Here is a working example of the code: CLICK HERE

I know the problem is that the onmouseover function is running when it should not, but I have no idea why or how to fix it.

Any help is appreciated.

Upvotes: 0

Views: 1291

Answers (1)

Samuel R
Samuel R

Reputation: 4235

The reason your selected item becomes transparent when you move out is because you put $(this).addClass('selected'); in the callback function of your animation, this means your li will not have the class "selected" until the animation is finished. Because your li does not have the class, when you move out it will go inside the else part of your moveout function and become transparent. The solution for this is to put your addClass and removeClass functions outside of the callbacks like this:

    $('.selected').animate({backgroundColor: 'transparent'}, 400);
    $('.opt').removeClass('selected');
    $(this).addClass('selected'); 
    $(this).animate({backgroundColor: '#00F'}, 400);

I have created a jsfiddle to show you how it looks like: http://jsfiddle.net/7nrZ6/

Upvotes: 1

Related Questions