Question

如何让fadeIn和fadeOut保持活动状态3秒并清除效果？

HTML：

<div id="divid"></div>

的CSS：

#divid{
    border:1px solid;
    border-color:#000;
 }

JQ：

var Interval;
function fadeInOut(divid){ 
   $('#'+divid).fadeOut(500).fadeIn(500);
};

Interval = setInterval(fadeInOut(divId),600);

Answer 1

这里有很多事情要发生。首先，我不认为你需要一个间隔。此外，fadeIn的第二个参数是回调。您可以在那里传递fadOut方法。最后，将迭代更改为3000毫秒（3秒）

＆＃13;

fadeInOut();

function fadeInOut() {
    $('#divid').fadeOut(3000, function() {
       $(this).fadeIn(3000);
    });
}

＆＃13;

#divid{
    border:1px solid;
    border-color:#000;
    width: 100px;
    height: 100px;
 }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>


<div id="divid"></div>

＆＃13;

Answer 2

如何将fadeIn和fadeOut保持活动3秒钟并清除实现

如果正确解释问题，请尝试使用.queue()按顺序呼叫.fadeIn(500).fadeOut(500)三次，然后停止;队列应为空，或“清除效果”

$("#divid").queue("_fx", $.map(Array(3), function() {
  return function(next) {
    return $(this).fadeOut(500).fadeIn(500, next);
  }
})).dequeue("_fx");

#divid {
    border:1px solid;
    border-color:#000;
 }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<div id="divid">abc</div>

FadeIn和fadeOut DIV边框仅限3秒

2 个答案: