0

我试图做出这样的效果，当我将鼠标悬停在一个 div 上时，它会向上移动并在其下方显示另一个 div。当我悬停时，它会回到原来的位置。但是正在发生的事情是，当我将鼠标放在那个 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>

提前致谢

4

1 回答 1

2

问题是，带有离开事件的框越来越小并滑到顶部。每次它的边框接触到您的鼠标指针时，都会再次触发该事件。变大的时候也是这样。

解决方案 1

只需box1_hide用于 mouseleave ( 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 回答