0

我的 jQuery 动画不断重复。它移出鼠标区域，因此触发了 mouseleave。如果您然后稍微移动鼠标，则它会向后移动，然后触发鼠标悬停。就这样不断重复。我该如何解决这个问题。

这是我的 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>

这是我的 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 */

这是我的 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);        
    });

});

jsFiddle 的一个工作示例：http: //jsfiddle.net/hypertje/LUE5b/

4

2 回答 2

0

使用 mouseenter 而不是 mouseover

于 2013-08-02T15:08:03.397 回答
0

试穿这个尺寸：

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);
                }
            });
        }

    });

});
于 2013-08-02T15:34:11.313 回答