Question

我试图产生一种效果，当我将鼠标悬停在div上方时，它向上移动并在其下方显示另一个div。当我徘徊时，它会回到原位。但是发生的事情是，当我把我的mousE保持在那个DIV时，它会一直来回动画，这是我不想要的。

令人惊讶的是，我使用了我在其他一些html中使用的相同jquery代码，它运行正常。请告诉我一个方法，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>

提前致谢

Answer 1

问题是，带有离开事件的框越来越小并滑到顶部。每当边框触摸鼠标指针时，事件再次被触发。当它变大时也一样。

解决方案1 

只需使用box1_hide进行鼠标距离（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);
    });
});

悬停并悬停不正常

1 个答案: