交错 jQuery 动画

发布于 2024-08-16 13:23:34 字数 434 浏览 5 评论 0原文

我想在 jquery 1.3 中对一系列项目进行动画处理，每个下一个项目在第一个动画的中途开始。换句话说，我想要一个半队列的效果。我尝试使用下面的代码，但它不起作用。有人有什么想法吗？

    $("h3").click(function(){
      $(".projectItem").each(function (i) {
        if (i > 0){
            setTimeout ("", 500);
        }
        $(this).animate({"opacity": 0, "duration": 1000});
      });
    });

PS：我尝试使用各种“空闲”或“暂停”jquery 插件，但我怀疑使用的技术是 jquery 1.3 之前的技术？

PPS：预先感谢您的帮助:)

原文

I want to animate a series of items in jquery 1.3, with each next item beginning halfway through the first animation. In otherwords, I want a half-queue effect. I attempted to use the below code, but it is not working. Does anyone have any ideas?

    $("h3").click(function(){
      $(".projectItem").each(function (i) {
        if (i > 0){
            setTimeout ("", 500);
        }
        $(this).animate({"opacity": 0, "duration": 1000});
      });
    });

PS: I attempted to use various "idle" or "pause" jquery plugins, but I suspect the techniques used were pre jquery 1.3?

PPS: Thanks in advance for your help :)

分享到QQ

分享到微博

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

发布评论

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

小帐篷 2024-08-23 13:23:34

您可以尝试这样的操作：

$("h3").click(function(){
  $(".projectItem").each(function (i) {
    // store the item around for use in the 'timeout' function
    var $item = $(this); 
    // execute this function sometime later:
    setTimeout(function() { 
      $item.animate({"opacity": 0}, 1000);
    }, 500*i);
    // each element should animate half a second after the last one.
  });
});

这里的总体思路是使用 .projectItem 列表 - 将动画从开始延迟到每个项目 500 毫秒。第一项 (i=0) 将有 0 毫秒的延迟，并在下一个事件循环期间（几乎）立即执行。每个其他项目都会在其之前延迟 500 毫秒，并且由于您的动画持续 1000 毫秒，因此它将在最后一个项目动画的大约一半处开始。

You could try something like this:

$("h3").click(function(){
  $(".projectItem").each(function (i) {
    // store the item around for use in the 'timeout' function
    var $item = $(this); 
    // execute this function sometime later:
    setTimeout(function() { 
      $item.animate({"opacity": 0}, 1000);
    }, 500*i);
    // each element should animate half a second after the last one.
  });
});

The general idea here is using your list of .projectItem - you delay the animation from beginning until 500ms per item. The first item (i=0) will have a 0ms delay and execute (almost) immediately during the next event loop. Each other item will be delayed by 500ms per item before it, and since your animation lasts 1000ms, it will start approximately halfway through the last items animation.

回复收藏 0 原文

各自安好 2024-08-23 13:23:34

我认为将动画分成两部分（从不透明度 1 到 0.5，以及从 0.5 到 0）并使用常规队列（如果可能的话）会更简单。

如果我们从不透明度 1 开始，则此代码为：

$("h3").click(function(){
  $(".projectItem").each(function (i) {
    $(this).animate({"opacity": 0.5, "duration": 500}, function(){
      //... put here something in the half way ...
      $(this).animate({"opacity": 0, "duration": 500}); 
    });
  });
});

I think it's simpler to break the animation to 2 parts (from opacity 1 to 0.5, and from 0.5 to 0) and use regular queue (if the breaking is possible).

This code is if we start at opacity 1:

$("h3").click(function(){
  $(".projectItem").each(function (i) {
    $(this).animate({"opacity": 0.5, "duration": 500}, function(){
      //... put here something in the half way ...
      $(this).animate({"opacity": 0, "duration": 500}); 
    });
  });
});

回复收藏 0 原文

~没有更多了~