jquery - .animate stack of elements smoothly

Question

I have a stack of divs that expand/collapse on mouseenter/mouseleave, but the animations become somewhat haphazard unless the pointer goes slowly over the just one div. I am using

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

and here is my fiddle:http://jsfiddle.net/khds120/AE7Qu/

Is there any way delay the animation for a bit and if the mouse leaves to not have it fire at all? .delay doesnt seem to be working the way I have it.

Answer 1

I took a slightly different approach and removed the animate from jQuery and put it into CSS. All the jQuery does is add/remove classes, and the animation is handled with transition. It needs a little cleaning up, but it should get you started.

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

Answer 2

You can try the 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;
});

It will use some delay time before opening, maybe there is a jquery option but I am not familiar with it.

Answer 3

you can do:

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 $(".expand") with different height:

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