0

这就是我在此页面上制作滑动效果的方式：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}); }
);
};
});
4

3 回答 3

0

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

于 2011-07-28T19:41:56.390 回答
0 
$(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});
    });
});

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

于 2011-07-28T20:07:58.657 回答
0

最后，我用这个技巧提高了效果。

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

于 2011-08-08T10:41:31.057 回答