0

次のページでは、テキストにカーソルを合わせると、スライド効果のあるテキストを含む div が追加されます。問題は、上にスライドして div を削除するときに、テキスト上で再度マウス入力するとスライドが停止し、div にテキストがないままになることです。高速に出入りすると、div が追加されます。その場合、どうすれば滑り落ちを再開できますか？

index.html

<!DOCTYPE html>
<html>
    <head>

        <script src = "http://code.jquery.com/jquery-1.10.1.min.js" type = "text/javascript"></script>
        <script src = "script.js" type = "text/javascript"></script>
    </head>

    <body>
        <div id = "main_div" style = "width: 33%">
            <div id = "hover_div">
                <h1 style = "width: 300px; background-color: blue; margin: 0; border: 1px solid #DDDDDD" id = "text1">Hover to see the truth</h1>
            </div>
        </div>
    </body>
</html>

script.js

$(document).ready (function() {

    $(document).on ("mouseenter", "#text1", function() {
        $("#main_div").append ("<div style = 'background-color: red; width: 300px; height: 200px; margin: 0; border: 1px solid #DDDDDD' id = 'descr'></div>");
        $("#descr")
            .hide()
            .append ("<h3 id = 'truth' style = 'float: left; height: 100px'>You're an idiot</h3>")
            .slideDown ("slow");
    });

    $(document).on ("mouseleave", "#text1", function() {
        $("#descr").slideUp ("slow", function() {
                $(this).remove();
        });
    });

    $(document).on ("mouseenter", "#descr", function() {
        $("#descr").slideUp ("slow", function() {
                $(this).remove();
        });
    });

});

デモ:フィドル

4

3 に答える 3

1

追加するだけ

$("#descr").remove();

すぐ後

$(document).on ("mouseenter", "#text1", function() {

デモ - http://jsbin.com/efoqux/1/editまたはhttp://jsfiddle.net/atif089/prS8R/6/

于 2013-06-24T09:39:46.127 に答える
0

$(document).on ("mouseenter", "#text1", ..関数でこれを試してください。

$("#main_div").children(":not('#hover_div')").remove().end()

リンクのテスト

于 2013-06-24T09:41:22.710 に答える
0

他のアニメーションを実行する前に、要素がアニメーション化されているかどうかを確認してください。

$(document).on ("mouseenter", "#text1", function() {
     //Do not append div multiple times
     if($("#descr").length ==0){
         $("#main_div").append ("<div style = 'background-color: red; width: 300px; height: 200px; margin: 0; border: 1px solid #DDDDDD' id = 'descr'></div>");
     }

     //Guard against animation      
     if($("#descr").is(":animated")){ 
         return false;
     }

     $("#descr")
          .hide()
          .append ("<h3 id = 'truth' style = 'float: left; height: 100px'>You're an idiot</h3>")
           .slideDown ("slow");
        });

$(document).on ("mouseleave", "#text1", function() {
    //Guard against animation
    if($("#descr").is(":animated")){ 
       return false;
    }

    $("#descr").slideUp ("slow", function() {
        $(this).remove();
     });
});

$(document).on ("mouseenter", "#descr", function() {
    if($("#descr").is(":animated")){ 
        return false;
    }

    $("#descr").slideUp ("slow", function() {
        $(this).remove();
    });
});

作業例 http://jsfiddle.net/DJTmt/

于 2013-06-24T09:41:44.507 に答える