Repeated jQuery with mouseover animation

My jQuery animation keeps repeating. It moves out of the mouse area, so mouseleave is triggered. If you then move the mouse a little bit, then it moves back, then mouseover is triggered. This way it keeps repeating. How can i fix this problem.

This is my HTML:

<!DOCTYPE HTML>
<html>
    <head>
        <title></title>

        <link rel="stylesheet" type="text/css" href="stylesheet.css">


        <script src="http://code.jquery.com/jquery-2.0.2.min.js"></script>
        <script src="http://code.jquery.com/color/jquery.color.plus-names-2.1.2.min.js"></script>
        <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>       
        <script src="http://ricostacruz.com/jquery.transit/jquery.transit.min.js"></script>
        <script type="text/javascript" src="script.js"></script>

    </head>

    <body>
        <div id="background">
            <div id="upperaccent"></div>
            <div id="bottomaccent"></div>
            <div id="leftaccent"></div>
            <div id="rightaccent"></div>
        </div>  
            <div id="leftmenu">

                <a href="list.html">
                    <div class="icontext" id="icontext1" style="margin-top: 150px;">
                        <img class="menuicons" id="menuicon1" src="list.png">
                    </div>
                    <p class="tags" style="top: 150px;" id="tag1">Tasks</p>
                </a>

                <a href="calender.html">
                    <div class="icontext" id="icontext2">
                        <img class="menuicons" id="menuicon2" src="calender.png">
                    </div>
                    <p class="tags" style="top: 239px;" id="tag2">Calender</p>
                </a>

                <a href="settings.html">
                    <div class="icontext" id="icontext3">
                        <img class="menuicons" id="menuicon3" src="settings.png">
                    </div>
                    <p class="tags" style="top: 328px;" id="tag3">Settings</p>
                </a>

            </div>

        <div id="topmenu"></div>        
    </body>
</html>

This is my CSS:

body, html {
    height: 100%;
    width: 100%;
    padding: 0;
    margin: 0;
}

/* background */

#background {
    background-color: #C5EFFD;
    width: 100%;
    height: 100%;
    z-index: -2;
    position: absolute;
}


/* menu's */

#leftmenu   {
    position: absolute;
    z-index: 2;

    height: 100%;
    width: 85px;
    background-color: #006295;
}

#topmenu    {
    position: absolute;
    z-index: 1;

    width: 100%;
    height: 7.5%;
    background-color: #BD2031;
    border-bottom-right-radius: 25px;
}

.panel  {
    width: 65%;
    height: 92.5%;
    background-color: #9BE1FB;
    left: 85px;
    top: 7.5%;
    position: absolute;
    border-bottom-right-radius: 15px;
}

#leftBar    {
    width: 100px;
    height: 100%;
    background-color: #006295;
    opacity: 0.25;
}

/* images */

.menuicons  {
    width: 64px;
    height: 64px;
}

.icontext   {
    width: 64px;
    height: 64px;
    margin-top: 25px;
    margin-left: 5px;
}

.tags   {
    font-size: 20px;
    color: #231F20; 
    left: 75px;
    width: 75px;
    height: 25px;
    background-color: #0073af; 
    text-align: center;
    border-radius: 5px;
    border: 2px solid #0082af;
    position: absolute;
}

/* Calender */

And this is my jQuery:

$(document).ready(function()    {
    $("#tag1, #tag2, #tag3").hide();


    $("#menuicon1").mouseover(function()    {
        $(this).transition({ scale: 1.50, x: 25, rotateY: '360deg'})
        $("#icontext1").transition({x: 50})
        $("#tag1").show()
        $("#tag1").transition({x: 120});        
    });
    $("#menuicon1").mouseleave(function()   {
        $(this).transition({ scale: 1.00, x: 0, rotateY: '0deg'})
        $("#icontext1").transition({x: 00})
        $("#tag1").transition({x: 0})
        $("#tag1").hide(50);    
    });

    $("#menuicon2").mouseover(function()    {
        $(this).transition({ scale: 1.50, x: 25, rotateY: '360deg'})
        $("#icontext2").transition({x: 50})
        $("#tag2").show()
        $("#tag2").transition({x: 120});                        
    });
    $("#menuicon2").mouseleave(function()   {
        $(this).transition({ scale: 1.00, x: 0, rotateY: '0deg'})
        $("#icontext2").transition({x: 00})
        $("#tag2").transition({x: 0})
        $("#tag2").hide(50);        
    });

    $("#menuicon3").mouseover(function()    {
        $(this).transition({ scale: 1.50, x: 25, rotateY: '360deg'})
        $("#icontext3").transition({x: 50})
        $("#tag3").show()
        $("#tag3").transition({x: 120});                    
    });
    $("#menuicon3").mouseleave(function()   {
        $(this).transition({ scale: 1.00, x: 0, rotateY: '0deg'})
        $("#icontext3").transition({x: 00})
        $("#tag3").transition({x: 0})
        $("#tag3").hide(50);        
    });

});

An working example with jsFiddle: http://jsfiddle.net/hypertje/LUE5b/

Answers


Try this on for size:

http://jsfiddle.net/LUE5b/2/

$(document).ready(function()    {
    $(".tags").hide();

    $(".menuicons").mouseover(function()    {

        if (!$(this).hasClass('current'))
        {
            $('.current').removeClass('current');

            $(this).transition({ scale: 1.50, x: 25, rotateY: '360deg'})
            $(this).parent().transition({x: 50})
            $(this).parent().parent().find('.tags').show()
            $(this).parent().parent().find('.tags').transition({x: 120});   
            $(this).addClass('current');

            $.each($('.menuicons'), function(){
                if (!$(this).hasClass('current'))
                {
                    $(this).transition({ scale: 1.00, x: 0, rotateY: '0deg'});
                    $(this).parent().transition({x: 00});
                    $(this).parent().parent().find('.tags').transition({x: 0});
                    $(this).parent().parent().find('.tags').hide(50);
                }
            });
        }

    });

});

Use mouseenter instead of mouseover


Need Your Help

increase element width using jQuery or JS

javascript jquery html css width

So I have multiple elements with class name ml, all different widths because of different text contents (not set in CSS).

Combining Neo4j and Elasticsearch

elasticsearch neo4j cypher

I am using Neo4j as my primary database. It is a nice piece of graph database that gives me very good control over connections between nodes. However, it seems to lack highly in searching full text

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.