Jquery .平滑地设置元素堆栈的动画

我在mouseenter/mouseleave上有一堆扩展/折叠的div，但是动画会变得有些随意，除非指针缓慢地移动到一个div上。我正在使用

$('.expand').mouseenter(function () {
$(this).delay(500).stop().animate({
    height: '+=70'
}, 500);
 $(this).find(".more").delay(175).fadeIn(100);});

这是我的小提琴：

---

是否有任何方法可以将动画延迟一点，如果鼠标离开而根本不启动它。延迟似乎不像我现在这样工作。

我采取了一种稍微不同的方法，从jQuery中删除了

动画，并将其放入CSS中。jQuery所做的只是添加/删除类，动画是通过
transition
处理的。它需要一点清理，但它应该让你开始

您可以试试

它在打开之前会使用一些延迟时间，可能有jquery选项，但我不熟悉它。
您可以执行以下操作：

var h=$('.expand').height();
var timeout;
$('.expand').mouseenter(function () {
    var e=$(this);
    window.clearTimeout(timeout);
    timeout = window.setTimeout(
        function(){
            e.stop().animate({
            height: h+70
        },500,function(){
              e.find(".more").fadeIn(100);
        });
        }
        , 500);

}).mouseleave(function () {
         window.clearTimeout(timeout);
         $(this).stop().animate({
            height: h
        },500);
        $(this).find(".more").fadeOut(50);
});    



对于具有不同高度的$（“.expand”）：

var timeout;
$('.expand').mouseenter(function () {
var e=$(this);
e.data("height",e.height());
window.clearTimeout(timeout);
timeout = window.setTimeout(
            function(){ 
                e.stop().animate({
                    height: e.data("height")+70
                },500,function(){
                    e.find(".more").fadeIn(100); 
                });
            }, 500);       
}).mouseleave(function () {
    var e=$(this);
    window.clearTimeout(timeout);
        e.stop().animate({
            height: e.data("height")
        },500);
        e.find(".more").fadeOut(50);
});    

我曾想过使用css转换，但不幸的是，我需要它在IE8中工作。
var timeout;
$('.expand').mouseenter(function () {
var e=$(this);
e.data("height",e.height());
window.clearTimeout(timeout);
timeout = window.setTimeout(
            function(){ 
                e.stop().animate({
                    height: e.data("height")+70
                },500,function(){
                    e.find(".more").fadeIn(100); 
                });
            }, 500);       
}).mouseleave(function () {
    var e=$(this);
    window.clearTimeout(timeout);
        e.stop().animate({
            height: e.data("height")
        },500);
        e.find(".more").fadeOut(50);
});