Question

我有两个div堆叠在一起，当我的鼠标悬停在div上时，我的代码会扩展框。当您从div中删除鼠标时，div会缩小回原始大小。

当你将鼠标滑入div然后从div中移入页面的空白区域时，我的代码工作得很好。但是，如果您尝试在两个div之间移动鼠标，一切都会变得混乱，现在正确的框不再缩小，整体功能也会丢失。

这是我的代码：

$(".divbox1").hover(function() {    
var height = $(this).height();
var height2 = $(this)[0].scrollHeight;

if (height2 > 35) {

    //Current position in relation to the page
    var offsetTop = $(this).offset().top;
    var offsetLeft = $(this).offset().left;

    //Clone the code and attach it to the page
    $(this).clone().css({
        position: "absolute",
        top: offsetTop,
        left: offsetLeft
    }).attr("id", "cloned").appendTo("body");

    //Hide the code underneath
    //$(this).css("visibility", "hidden");

    $('#cloned').animate({
        height: height2
    }, 150).bind('mouseleave', function() {
        var cloned = $(this);
        //Animate back and remove
       cloned.animate({
            height: height
        }, 300, function() {
            cloned.remove();
            //Show the code underneath
            //$(this).css("visibility", "visible");
        });


    });
}
 });

这是我关联的HTML和CSS

    .divbox1 {
color: #100;
background-color: #f9f9f9;
border: 1px solid silver;
overflow: hidden;
width: 200px;
height:35px;
}

    <div class="divbox1" id="one">
sdsdsadasdsad<br />
sadasdsdaasdadsadssdsdsadasasdasdsdsddsasdasdasdasdasddasadsasd<br>
dasdasasdasdsad
<br /><br />
Really Tall box!
    </div>
   <br />
    <div class="divbox1" id="two">
  Second box<br />
yada ydad<br />
yada yada<br />
yada yada<br />
    </div>

对于那些感兴趣的人，该项目也在Jsfiddle：http://jsfiddle.net/hQkFH/10/

也有人想知道为什么我在制作动画之前克隆了盒子，因为我打开盒子来覆盖它下面页面上的任何东西（在顶盒，第二个盒子的情况下）

谢谢！

Answer 1

您是否尝试在克隆divbox之前添加$('#cloned').remove();？

我认为问题是当你输入两个悬停事件时，你最终得到两个id =“cloned”的div

Answer 2

当用户输入第一个div而第二个div仍处于动画状态时会出现此问题（因此页面中已经存在“克隆”元素。）

以下是animation变量（布尔值）的变通方法：http://jsfiddle.net/hQkFH/14/

它修复了错误，但是当用户输入第一个div而第二个div仍然是动画时，它什么都不做（但如果他再次回到第一个div，它将正常打开）

Answer 3

使用.stop(true, true)清除动画队列。

非常奇怪的jquery mouseleave行为

3 个答案: