Question

我正在使用以下Jquery代码逐个淡入多个具有相同类的div。这很好用，我希望它保持不变。

然而，我最终发现了大约30个div的出现，它一直沿着我的页面走下去：

Div
Div
Div
Div
Div 
Div

我想要的是，一次只能看到最多2个div。我仍然希望div逐个淡出，但在任何时候只能显示最多2个。因此，如果用户关闭第一个顶部div，那么下一个div将会淡入。

结果：

Div 
Div   <---- If I close, next div fades in to replace

(Div Waiting to fade in when one of the first 2 divs is closed) etc

代码：

<script>        
    $(document).ready(function(){
        var animations = [];

        $('.noti_box').each(function(i) {
            animations.push(
               $(this).hide().delay(i * 1000).fadeIn(1500).promise()
            );
        });

        $.when.apply($, animations).done(function () {
            time=setInterval(function(){
            if ( $('.noti_box:visible').length === 0 ) {
                $(".advert").fadeIn("slow");
            } },200);
        });
    });
    </script>

的jsfiddle：

https://jsfiddle.net/2efwkxn8/

Answer 1

尝试使用选择器fadeIn（）以及选择下一个div的.next（）。示例：

＆＃13;

$(".fade").not(".fade:last").click(
  function() {
    $(this).fadeOut("slow");
    $(this).next().fadeIn("slow");
  }
);

$(".fade:last").click(
    function() {
    $(this).fadeOut("slow");
    $(".fade:first").fadeIn("slow");
  }
);

＆＃13;

div {
  width: 8px;
  border: solid black 1px;
  padding: 10px;
  position: absolute;
  }

div:hover {
  display: block;  
  }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="fade">
  1
</div>
<div class="fade" style="display:none">
  2
</div>
<div class="fade" style="display:none">
  3
</div>
<div class="fade" style="display:none">
  4
</div>
<div class="fade" style="display:none">
  5
</div>
<div class="fade" style="display:none">
  6
</div>
<div class="fade" style="display:none">
  7
</div>
<div class="fade" style="display:none">
  8
</div>

＆＃13;

Jquery：逐个淡入多个具有相同类的div，但每次只显示最多2个？

1 个答案: