Question

我有一个要移动的元素列表，一次一个是活动的。

我现在这样做：

$('.cards li:eq('+ step +')').animate(//animation info)
$('.cards li:eq('+ (step + 1) +'), .cards li:eq('+ (step - 1) +')').animate({'opacity':'0.8'})
$('.cards li:eq('+ (step + 2) +'), .cards li:eq('+ (step - 2) +')').animate({'opacity':'0.6'})
$('.cards li:eq('+ (step + 3) +'), .cards li:eq('+ (step - 3) +')').animate({'opacity':'0.4'})

对于活动项目和三对等距的邻居兄弟姐妹都可以正常工作。我需要的是让列表项 4个地方或更多拥有自己的动画。

我正在做这件事，而且有效：

  $('.cards li').each(function(){
      thisEq = $(this).index() + 1
      if(thisEq > step && ((thisEq - step) > 3)){animate({'opacity':'0'})}
      if(thisEq < step && ((step - thisEq) > 4)){animate({'opacity':'0'}}
    })

但是有更干净的方式吗？如果我可以依靠伪类，我会喜欢它。

Answer 1

您可以使用每个参数：

  $('.cards li').each(function(i){
     if(i - step == 0){
       $(this).animate()
     }else if( Math.abs(i-step) < 4){
       // 1, 2, 3       
       $(this).animate({'opacity': 1 - 0.2 * Math.abs(i-step)})
     }else{
       // 4 and more
     }
  }

在一个列表中隐藏兄弟姐妹超过三步之遥的最佳方法是什么？

1 个答案: