Zインデックスを上げて不透明度を下げるスライドショー

Question

初めて投稿したときは、私にご負担ください。私がいることスライドショーを作成しようとしている

：

• は0.7
• の不透明度を各<section>
• セットすべてのスライドへのzインデックスを割り当てるには、現在、トップスライドの不透明度を割り当てここでは1

HTMLです：

<div id="slides"> 
    <section class="slide"> 
    <article> 
     <h1>6</h1> 
    </article> 
    </section> 
    <section class="slide"> 
    <article> 
     <h1>5</h1> 
    </article> 
    </section> 
    <section class="slide"> 
    <article> 
     <h1>4</h1> 
    </article> 
    </section> 
    <section class="slide"> 
    <article> 
     <h1>3</h1> 
    </article> 
    </section> 
    <section class="slide"> 
    <article> 
     <h1>2</h1> 
    </article> 
    </section> 
    <section class="slide"> 
    <article> 
     <h1>1</h1> 
    </article> 
    </section> 
</div> 
<div id="prev"> 
    <a href="#previous">&larr;</a> 
</div> 
<div id="next"> 
    <a href="#next">&rarr;</a> 
</div> 

ここ

はJSはこれまでのところです：

$(document).ready(function() { 
    var z = 0; 
    var inAnimation = false; 

    $('section.slide').each(function() { 
    z++; 
    $(this).css('z-index', z); 
    }); 

    function swapFirstLast(isFirst) { 
    if(inAnimation) return false; 
    else inAnimation = true; 

    var processZindex, direction, newZindex, inDeCrease; 

    if(isFirst) { 
     processZindex = z; direction = '-'; newZindex = 1; inDeCrease = 1; 
    } else { 
     processZindex = 1; direction = ''; newZindex = z; inDeCrease = -1; 
    } 

    $('section.slide').each(function() { 
     if($(this).css('z-index') == processZindex) { 
     $(this).animate({ 'top' : direction + $(this).height() + 'px' }, 'slow', function() { 
      $(this).css('z-index', newZindex) 
      .animate({ 'top' : '0' }, 'slow', function() { 
      inAnimation = false; 
      }); 
     }); 
     } else { 
     $(this).animate({ 'top' : '0' }, 'slow', function() { 
      $(this).css('z-index', parseInt($(this).css('z-index')) + inDeCrease); 
     }); 
     } 

     return false; 
    } 

    $('#next a').click(function() { 
     return swapFirstLast(true); 
    }); 

    $('#prev a').click(function() { 
     return swapFirstLast(false); 
    }); 
    }); 
}); 

私はスクリプトに次のコードを挿入できると思っていた：

if($(this).css('z-index') == processZindex) { 
    $(this).css('opacity', 1); 
} else { 
    $(this).css('opacity', 0.7); 
} 

問題は、私は1で不透明度を得ることができないようですだから私は$(this).css('z-index') == processZindexを$(this).css('z-index') != 6と書くことを考えましたが、問題が発生します。

これを簡単にコードする方法はありますか？

Answer 1

私はちょうどappendTo、preprendToを使用して、代わりにZインデックスの要素の順序を使用：

http://jsfiddle.net/jtbowden/RAT8N/1/

一つの機能または別の機能が優れていた場合、私が決めることができませんでした。ここでは、2つの別々の機能である：

http://jsfiddle.net/jtbowden/5LJcA/3/

はあなたが行っているものをということですか？