影响错误元素的 Jquery 动画回调

Posted 2023-05-08

【中文标题】影响错误元素的 Jquery 动画回调

【英文标题】：Jquery Animation callback affecting the wrong elements

【发布时间】：2011-03-10 18:58:49

【问题描述】：

嘿，我试图制作一种滑块，但在让循环“重置”时遇到问题。这个想法是让元素动画以淡化不透明度，并在完成后将它们隐藏起来，以便在重置循环后不会触发“.is(:visible)”。然而，回调函数正在影响将其不透明度动画为“1”的元素，并且在错误的时间。我猜这很简单，我还不知道动画，因为我有点 jQuery 新手。

    $('a#galleryArrow').bind('click', function()

      wrapper.children().slice(imageSet,(imageSet + 5)).animate(opacity: 0, function() $(this).hide(););

      if (wrapper.children(':last-child').is(':visible'))  imageSet = 0;  
      else  imageSet = imageSet + 5; 

      wrapper.children().slice(imageSet, (imageSet + 5)).css(display: 'block').animate(opacity: 1);
      wrapper.animate(left: -(imageSet * 104));          

      return false; 

);

【问题讨论】：

显示定义wrapper的代码

对不起：var wrapper = $('div#imagebar ul');这是正确的吗？

【参考方案1】：

首先尝试将第二个动画移动到第一个动画回调内部，以免它们发生冲突。

$('a#galleryArrow').bind('click', function()

      wrapper.children()
             .slice(imageSet,(imageSet + 5))
             .animate(opacity: 0, function() 

                $(this).hide();

                if (wrapper.children(':last-child').is(':visible'))  
                    imageSet = 0; 
                 
                else  
                    imageSet = imageSet + 5; 
                

                wrapper.children()
                       .slice(imageSet, (imageSet + 5))
                       .css(display: 'block')
                       .animate(opacity: 1);

                wrapper.animate(left: -(imageSet * 104));    

          );

      return false; 

);

【讨论】：

是的，因为我没有发布包装器是 ul，因此孩子是 li，所以按照你的建议这样做会导致主回调中的所有代码运行 5 次（每个 1孩子完成不透明度动画的时间：0，感谢您向我展示了更好的样式/顺序 :)

@Abe - 没问题，你当时排序了吗？

不，它仍然表现得很奇怪，我已经上传了它，所以任何人都可以看到：southwark-woodcraft.org.uk

@Abe - 今晚晚些时候会为你解决这个问题

@redsquare 你有机会看看这个吗？还是我自己没有想到