如何改善我网站标题上的滑动效果？

Question

这是我如何使此页面上的滑动效果：dmg-01.net：

$(document).ready(function(){ 
    $(".trail-text").attr("style", "display:none;"); 
    if ($("#one,#two,#three,#four,#five")) { 
    var pixies = $("#one,#two,#three,#four,#five"); 
    $("#one,#two,#three,#four,#five").hover(function() { 
     $(this).find(".trail-text").slideDown("fast"); 
    }, function() { 
     $(this).find(".trail-text").slideUp("fast"); 
    }); 
    }; 
}); 

我想改善它，因为它并不像优雅，因为我想要的。我认为如果只有一个幻灯片效果同时发生而没有重叠会更好。

在另一方面，我试图达到相同的效果是这样的：

$(function(){ 
    $("#one,#two,#three,#four,#five").each(function(){ 
    $(this).hover(function(){ 
     $(this).animate({height: "100%", width: "100%"}, {queue:false, duration:111}); 
    },function() { 
     $(this).animate({height: "44px", width: "44px"}, {queue:false, duration:333}); 
    }); 
    }); 
}); 

我抛弃它，因为我不知道如何设置“自动”的高度，里面的“隐藏内容“元素在元素外部可见。

这怎么能改进？

根据我的目的，我更喜欢用CSS属性动画元素的后代。这是我试图做到的，但它不起作用。为什么？

$(document).ready(function(){ 
$(".trail-text").attr("style", "display:none;"); 
if ($(".#one,#two,#three,#four,#five")) { 
$("#one,#two,#three,#four,#five").hover(
function() { $(this).find(".trail-text").animate({height: "100%", width: "444px"}, {queue:false, duration:111}); }, 
function() { $(this).find(".trail-text").animate({height: "0", width: "444px"}, {queue:false, duration:333}); } 
); 
}; 
}); 

Answer 1

最后，我提高效果with this trick。

但是，我宁愿.animate而不是.slideDown/Up，所以我可以添加CSS属性。无论如何，动画很流畅，我很满意。感谢您的建议和改进！

Answer 2

使用jQuery“queue”方法链接动画。

Answer 3

$(function(){ 
    $("#one,#two,#three,#four,#five").hover(function(){ 
     $(this).stop().animate({height: "100%", width: "100%"}, {queue:false, duration:111}); 
    },function() { 
     $(this).stop().animate({height: "44px", width: "44px"}, {queue:false, duration:333}); 
    }); 
}); 

那么你可以跳过一个额外的循环