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

マウスオーバーの代わりにマウスエンターを使用する

于 2013-08-02T15:08:03.397 に答える