Question

我做了一个小例子来模拟我的问题：

$(document).ready(function(){
  var callback = function(){
    output.innerHTML += '<br>Fade example finished !!';
  };
  $('.fade').fadeOut('fast').fadeIn(callback);
});

div {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="fade">Fade example</div>
<div class="fade">Fade example</div>
<div class="fade">Fade example</div>
<div id="output">Output: </div>

如您所见，fadeIn回调每div执行一次。

但是我希望它只对所有'.fade'元素运行一次。

我可以设置任何属性，因此回调只执行一次吗？

Answer 1

你可以在这个场景中使用“when”。

$(document).ready(function(){
  var callback = function(){
    output.innerHTML += '<br>Fade example finished !!';
  };
  $.when($('.fade').fadeOut('fast').fadeIn()).then(function () {
 callback();
});
});

Answer 2

Jquery one在这种特殊情况下可能很有用。

将处理程序附加到元素的事件。处理程序已执行每个事件类型每个元素最多一次。

来自jQuery文档。

在这里阅读更多jQuery文档 http://api.jquery.com/one/

仅执行一次fadeIn回调

2 个答案: