0

mouseenter/mouseleave で展開/折りたたむ div のスタックがありますが、ポインターが 1 つの 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 は、私が持っているようには機能していないようです。

4

3 に答える 3

0

できるよ： 

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/
高さが異なる $(".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);
});

フィドル更新

于 2013-06-06T16:24:56.590 に答える