非常奇怪的jquery mouseleave行爲

我有兩個div，一個在另一個之上堆疊，當我的代碼在鼠標懸停在div上時展開框。當您從div中移除鼠標時，div會縮回原始大小。非常奇怪的jquery mouseleave行爲

當您將鼠標滑入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/

而且櫃面有人在想知道爲什麼我在動畫之前克隆了盒子，這是因爲我打開盒子覆蓋它下面的頁面上的任何東西（在頂盒的情況下，秒ond box）

謝謝！

來源

2011-06-12 Mark