Question

我试图做的就是制作一个眨眼的盒子。换句话说，我想将一个函数称为自身。我有这个功能：

＆＃13;

$(document).ready(function(){
    $("button").click(function(){
        $("#div1").fadeToggle("slow");
    });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Click to fade in/out box</button><br /><br /><br />
<div id="div1" style="width:80px;height:80px;background-color:red;"></div>

＆＃13;

我希望当用户点击按钮时，只要请求（ajax）所花费的时间，该框就会连续几次淡入/淡出。目前，当用户点击该按钮时，该框会淡入/淡出一次。现在我想开始淡入/淡出，直到请求结束。我怎么能这样做？

实际上我在发送请求时尝试设置闪烁框。

Answer 1

＆＃13;

$(document).ready(function(){
  function toggleForever() {
    $("#div1").fadeToggle("slow", toggleForever);
  }
  
  $("button#start").click(function () {
    toggleForever();
  });
  
  $("button#stop").click(function () {
    $("#div1").stop().animate({opacity:1}, "slow");
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="start">Click to fade in/out box</button>
<button id="stop">Click to stop</button><br /><br /><br />
<div id="div1" style="width:80px;height:80px;background-color:red;"></div>

＆＃13;

动画完成后，将调用fadeToggle的函数参数。在另一个按钮上单击，我们stop动画并淡入框（因此，当我们完成时，无论我们在动画中的哪个位置，它都始终可见）。在您的真实代码中，当您的AJAX调用完成时，您将执行此操作。

<强>更新

另一种方法，使用CSS动画代替。这里一个显着的区别是停止动画突然恢复到完全不透明。

＆＃13;

$(function () {
  $('#start').click(function () {
    $('#div1').addClass('blinking');
  });
  
  $('#stop').click(function () {
    $('#div1').removeClass('blinking');
  });
});

＆＃13;

.blinking {
  animation: blinker 600ms linear infinite alternate;
}

@keyframes blinker { to { opacity: 0; } }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="start">Click to fade in/out box</button>
<button id="stop">Click to stop</button><br /><br /><br />
<div id="div1" style="width:80px;height:80px;background-color:red;"></div>

＆＃13;

Answer 2

在jQuery中有一些全局的ajax事件。

您可以像以下一样聆听ajaxStart，ajaxComplete：

    $(function () {
        $( document ).ajaxStart(function() {
            // Start your animation
        });
        $( document ).ajaxComplete(function() {
            // End your animation
        });
    });

我的片段：

＆＃13;

// utility function to wait (simulate ajax)
$.wait = function(ms) {
  var defer = $.Deferred();
  setTimeout(function() { defer.resolve(); }, ms);
  return defer;
};


var isAjaxEnded = true;

$(function () {
  $("#div1").click(function(){
    $(this).fadeToggle("slow", function() {
      if (!isAjaxEnded)
        $("#div1").trigger('click');
    });
  });

  $( document ).ajaxStart(function() {
    isAjaxEnded = false;
    $("#div1").trigger('click');
  });
  
  $( document ).ajaxComplete(function() {
    // the next line is commented because I'm simulating...
    //isAjaxEnded = true;
    // End your animation
  });
  
  
  $.getJSON('https://api.github.com/users').done(function(data) {
    // just wait only 3 seconds
    $.wait(3000).then(function() {
      isAjaxEnded = true;
    });
  });
});

＆＃13;

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>

<div id="div1" style="width:80px;height:80px;background-color:red;"></div>

＆＃13;

Answer 3

您可以使用SetInterval连续运行开关循环并使用ClearInterval结束它。

var _timer1;
var _timer2;

$(document).ready(function(){

    $("#BtnStart").click(function(){
        _timer1 = setInterval(function(){ $("#div1").fadeToggle("slow"); }, 500);       
        _timer2 = setInterval(function(){ $("#div1").fadeToggle("slow"); }, 1000);
    });     

    //Call stop stop annimation
    $("#BtnStop").click(function(){
        clearInterval(_timer1);
        clearInterval(_timer2);
    });     

});

如何连续多次运行功能？

3 个答案: