Question

我有一堆divs在mouseenter / mouseleave上展开/折叠，但是除非指针在一个div上缓慢移动，否则动画会变得有些杂乱无章。我正在使用

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

这是我的小提琴：http://jsfiddle.net/khds120/AE7Qu/

有没有什么方法可以延迟动画一段时间，如果鼠标离开的话根本没有它？ .delay似乎没有按照我的方式工作。

Answer 1

我采用了稍微不同的方法并从jQuery中删除了animate并将其放入CSS中。所有jQuery都是添加/删除类，动画是用transition处理的。它需要一点点清理，但它应该让你开始。

http://jsfiddle.net/AE7Qu/1/

Answer 2

您可以尝试following，

    var activeIndex=null;
$('.expand').mouseenter(function () {
    var me=this;
    function f(index){
        //console.log('abcd'+index+"|"+(activeIndex));
        if(index!=activeIndex)
            return;
        $(me).animate({
            height: '+=70'
        }, 500);
        me.expanded=true;
    }
    var index=window.setTimeout(function (){f(index);}, 300);
    activeIndex=index;
});

$('.expand').mouseleave(function(){
    if(this.expanded==true)
    {
        $(this).animate({
            height: '-=70'
        }, 500);
        this.expanded=false;
    }
    activeIndex=null;
});

它会在打开之前使用一些延迟时间，也许有一个jquery选项，但我不熟悉它。

Answer 3

你可以这样做：

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);
});

http://jsfiddle.net/AE7Qu/4/
for $（＆＃34; .expand＆＃34;），身高不同：

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);
});

fiddle update

.anan堆栈的元素顺利

3 个答案: