0

divの上にカーソルを合わせると上に移動し、その下に別のdivが表示されるようにしようとしています。ホバーアウトすると、元の位置に戻ります。しかし、何が起こっているのかというと、マウスをそのDIVに置いたままにしておくと、マウスが前後にアニメーションし続けます。これは望ましくありません。

驚くべきことに、ここで使用したのと同じ jquery コードを他の html で使用したところ、問題なく動作しました。ホバリングで div がオフになり、アニメーションを継続せず、ホバーアウトすると元に戻る方法を教えてください。コードは次のとおりです。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <title>Untitled Document</title>
   <script type="text/javascript" src="jquery-1.9.1.min.js"></script>
   <style>
        body{ overflow:hidden; padding:0; margin:0;}
        .boxouter{ width:100%; float:left; }
        .box1{ background-color:#CC0000; height:100%; width:25%; height:800px; float:left; position:absolute;}
        .box2{ background-color:#339900; height:100%; width:25%; height:800px; margin-left:25%; float:left; position:absolute;}
        .box3{ background-color:#FFCC00; height:100%; width:25%; height:800px; margin-left:50%; float:left; position:absolute;}
        .box4{ background-color:#0000CC; height:100%; width:25%; height:800px; float:left; margin-left:75%; position:absolute;}
        .box1_hide{ background-color:#666; height:100%; width:25%; height:800px; float:left; position:absolute; z-index:-1;}
    </style>
    <script>   
        jQuery(document).ready(function(){
        $(".box1").mouseenter(function(){
            $(".box1").stop().animate({height:"0px"},200);
        });

           $(".box1").mouseleave(function(){ 
            $(".box1").stop().animate({height:"800px"},200);
        });
        });
   </script>
 </head>
 <body>
    <div class="boxouter">
   <div class="box1"></div><div class="box1_hide">click here</div>
   <div class="box2"></div>
   <div class="box3"></div>
   <div class="box4"></div></div>
 </body>
</html>

前もって感謝します

4

1 に答える 1

2

問題は、leave イベントのあるボックスが小さくなり、上にスライドすることです。その境界線がマウス ポインターに触れるたびに、イベントが再びトリガーされます。大きくなっても同じです。

解決策 1

box1_hidemouseleave（DEMO ）に使用するだけです：

jQuery(document).ready(function(){
    $(".box1").mouseenter(function(){
        $(".box1").stop().animate({height:"0px"},200);
    });

    $(".box1_hide").mouseleave(function(){ 
        $(".box1").stop().animate({height:"800px"},200);
    });
});

解決策 2 (より良い)

解決策 1 の唯一の問題は、マウスを速く動かしすぎるとbox1再び隠れないことです。したがって、別のソリューションを使用できます。オーバーレイと非表示の div を別の div でラップし、イベントを追加します ( DEMO )。

<div class="box-wrapper"><div class="box1"></div><div class="box1_hide">click here</div></div>

そしてjQuery：

jQuery(document).ready(function(){
    $(".box-wrapper").mouseenter(function(){
        $(".box1", this).stop().animate({height:"0px"},200);
    });

    $(".box-wrapper").mouseleave(function(){ 
        $(".box1", this).stop().animate({height:"800px"},200);
    });
});
于 2013-05-25T09:24:17.433 に答える