Question

I have a list of elements to move through, and one at a time is active.

I’m doing it like this at the moment:

$('.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'})

That works fine for the active item, and three pairs of equidistant neighbouring siblings.
What I need though, is to make list items 4 places away or more have their own animation.

I’m doing this, and it works:

  $('.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'}}
    })

But is there a cleaner way? I’d like it if I could just rely on pseudo-classes.

Answer 1

You might use each with an argument:

  $('.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
     }
  }