Question

我正试图在div内部的一组图像上触发一系列效果（简单的动画显示/隐藏），其中图像用类名标记，类名通过类选择器提供过滤能力。

<div id="myDiv">
    <img class="tag1 tag2 tag3" ... />
    <img class="tag2 tag3" ... />
    <img class="tag1 tag2" ... />
    ...more image tags...
</div>

现在，我想显示匹配标签的图像，如：

$('#myDiv .tag1').hide('blind', {}, 300);    
$('#myDiv .tag2').show('blind', {}, 300);

其中tag1是旧的活动标记，tag2是新的活动标记。我想我可以将show函数放到hide函数调用的回调中，但它最终会重复调用show方法（与第一次调用中隐藏的项目一样多次）。

有没有人可以建议如何在第一个匹配的集合上只使用一次回调，或者提供另一种方法来使用jQuery的队列按顺序将它们拉出来？我看到的挑战是，显示效果不一定会影响使用隐藏效果命中的相同图像。

我尝试过的一件事是使用一个促销元素，我可以附加效果（比如将它们分配到myDiv的队列中），但是我看不到让它正常工作的方法。

谢谢！

Answer 1

我要做的是创建一个变量，如果已经触发了show，那么你可以存储该变量，然后在if检查中包含show的调用。什么事件在触发它们之前触发隐藏重置此变量。这应该确保该节目在生皮之后只会发射一次。

var fired = false;

function showhide()
{
  fired=false;
  $('#myDiv .tag1').hide('blind', function(){
    if(!fired)
    {
      fired=true;
      $('#myDiv .tag2').show('blind', {}, 300);
    }
  }, 300);
}

匹配集上的jQuery队列

1 个答案: