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

发布于 2024-11-26 14:08:52 字数 1461 浏览 1 评论 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});
    });
  });
});

我放弃了它，因为我不知道如何设置高度“auto”，并且“隐藏”元素内的内容在元素外部可见。

如何改进？

根据我的目的，我更喜欢使用 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}); }
);
};
});

原文

This is how I made the sliding effect on this page: 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"); 
    });
  };
});

I would like to improve it because it's not as graceful as I want. I think it would be better if only one slide effect occur at the same time with no overlapping.

On the other hand, I tried to accomplish the same effect this way:

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

I discarded it because I don't know how to set "auto" for height and the content inside the "hidden" elements are visible outside the element.

How can this be improved?

According to my purpose, I prefer to animate with CSS properties the descendants of the elements. This is how I tried to do it but it isn't working. Why?

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

じ违心 2024-12-03 14:08:52

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

回复收藏 0 原文

淡莣 2024-12-03 14:08:52

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

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

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

So you can skip an additional loop

回复收藏 0 原文