如何淡化类的子元素

Question

这是我的数据，现在我想逐个淡化类数据的元素

.data
 {
    width: 74%;
    background: red;
    height: 20px;
    position: absolute;
    right: 13%;
    display: flex;
    text-align: center;
}
    <div class="data">data A1
    </div>
    <div class="data"> data B1
    </div>
    <div class="data"> data C1
    </div>
    <div class="data"> data D1
    </div>

我尝试了$(".data")[0].fadeIn(2000)以及$(".data")[0].delay(200).fadeIn(2000) 我在使用索引时都会出错，但在删除索引时工作正常但后来所有子进程都在淡入淡出。

Answer 1

您取消引用在执行$(".data")[0]时获得的数组，并最终得到不能使用jQuery方法的底层DOM节点。不使用$(".data")[0]，而是使用$(".data:first")，$(".data:eq(0)")，$(".data").eq(0)或$(".data").first()

Answer 2

你做的是获取单个DOM元素，而不是获取该元素的jquery表示，在你的情况下你可以这样做：

var ele = $(".data")[0]
$(ele).fadeIn(2000)

Answer 3

您可以使用.eq()

在jQuery中定位同一类的某些元素

$(".data").eq(2).fadeIn(1000);

您可以创建一个for循环来使用类名迭代每个元素，并使用setTimeout在淡入之前给出延迟。

更多例子： https://api.jquery.com/eq/

Answer 4

您可以使用.each()和setTimeout()

＆＃13;

＆＃13;

$('.data').each(function(i){
  var ThisIt = $(this);
  setTimeout(function(){
    $('.data').fadeOut(200);
    ThisIt.fadeIn(200);
  } , 3000 * i);
});

＆＃13;

.data
 {
    width: 74%;
    background: red;
    height: 20px;
    position: absolute;
    right: 13%;
    display : flex;
    text-align: center;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="data">data A1
</div>
<div class="data"> data B1
</div>
<div class="data"> data C1
</div>
<div class="data"> data D1
</div>

＆＃13;

＆＃13;

＆＃13;

OR：您可以使用delay()，.queue()和addClass()

之类的内容

＆＃13;

＆＃13;

$('.data').each(function(i){
  var ThisIt = $(this);
  ThisIt.delay(2000 * i).queue(function(){
    $(this).addClass('visible');
  });
});

＆＃13;

.data
 {
    width: 74%;
    background: red;
    height: 20px;
    position: absolute;
    right: 13%;
    display : flex;
    text-align: center;
    visibility : hidden;
    opacity : 0;
}
.visible{
  visibility : visible;
  opacity : 1;
  transition-duration : 2s;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="data">data A1
</div>
<div class="data"> data B1
</div>
<div class="data"> data C1
</div>
<div class="data"> data D1
</div>

＆＃13;

＆＃13;

＆＃13;

  

注意：这段代码只是为了开始...你可以玩转   无限循环

Answer 5

我认为这就是你所需要的。

（不是最好的代码，但应该有用）

var a=0;
$(".data").each(function(){
	a++;
	$(this).fadeIn(1000*a);
});

.data
 {
    width: 100%;
    background: red;
    height: 20px;
    display: none;
    text-align: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="data">data A1
    </div>
    <div class="data"> data B1
    </div>
    <div class="data"> data C1
    </div>
    <div class="data"> data D1
    </div>

Answer 6

如果您不需要使用JS，那么CSS方法正在使用@keyframes您只需要使用animate-delay延迟元素的开始时间并向元素添加所需的类。 Fiddle希望这有帮助。

.fadeIn{
  animation-name: fadeIn;
}
.animated1{
animation-duration: 2s;
animation-fill-mode: both;
}
.animated2{
animation-duration: 2s;
animation-fill-mode: both;
animation-delay: 2s;
}
.animated3{
animation-duration: 2s;
animation-fill-mode: both;
animation-delay: 4s;
}
.animated4{
animation-duration: 2s;
animation-fill-mode: both;
animation-delay: 6s;
}

@keyframes fadeIn
{
  0%
  {
    opacity:0;
    }
   to{
     opacity:1;
     }
}
.fadeIn{
  animation-name:fadeIn;
  }

<div class="data fadeIn animated1">data A1
    </div>
    <div class="data fadeIn animated2"> data B1
    </div>
    <div class="data fadeIn animated3"> data C1
    </div>
    <div class="data fadeIn animated4"> data D1
    </div>

Answer 7

您可以使用递归来为集合的第一个元素设置动画。每当当前的.fadeIn()动画结束时，请使用该集合调用该函数，但是.slice()删除第一个项目：

function fadeIn($els) {
  $els.eq(0).fadeIn(1000, function() {
    fadeIn($els.slice(1));
  });
}

fadeIn($('.data'))

.data {
  background: red;
  height: 20px;
  text-align: center;
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="data">data A1
</div>
<div class="data"> data B1
</div>
<div class="data"> data C1
</div>
<div class="data"> data D1
</div>

Answer 8

与其他答案不同，这个答案保证每个答案都会遵循前一个答案。其他答案不能保证使用超时。

这是一个正确使用回调来递归每个<div>的功能，以便在问题请求时一个接一个地显示 。

我对你的基础CSS进行了两次修改。我将background-color设置为白色（以便于阅读），并将display设置为none，以便动画可见。

let collection = $('.data');
(function doIt(index) {
  $(collection[index])
  .fadeIn(2000, () => {
      if (index++ < collection.length) doIt(index);
    });
})(0);

.data {
  width: 74%;
  background: white;
  height: 20px;
  position: absolute;
  right: 13%;
  display: flex;
  text-align: center;
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="data">data A1
</div>
<div class="data"> data B1
</div>
<div class="data"> data C1
</div>
<div class="data"> data D1
</div>