z-index左側的jquery動畫

Question

點擊（動畫）滑動到左側，然後用z-index繼續前進。
下例解釋我的問題。我需要爲盒子製作動畫。

http://jsfiddle.net/Q6Czh/40/

我做錯了什麼？

$('.next').live("click", function() { 
    $('#page').animate({ left: '-=700' }, 600, function() { 
     $('.paper-three').css('z-index', '120'); 
     $('.paper-two').css('z-index', '130'); 
     $('.paper-one').css('z-index', '110'); 
     $('.paper-one').animate({ left: '+=700' }, 600); 
    }); 
});​ 

Answer 1

我覺得你這個問題的方式接近複雜（特別是關於CSS）：

看一看這樣：（

HTML注意相反的順序）

<div id="slide-pages"> 
    <div class="buttons"> 
    <div class="prev"> &lt; </div> 
    <div class="next"> &gt; </div> 
    </div> 

    <section class="paper-three page"> 
    <div><h1>THREE</h1></div> 
    </section> 

    <section class="paper-two page"> 
    <div><h1>TWO</h1></div> 
    </section> 

    <section class="paper-one page"> 
    <div><h1>ONE</h1></div> 
    </section> 
</div>​ 

JS

的代碼做ES如下：

• 滑出最後一頁（代碼！視覺上這將是第一個因position: absolute）
• 將它插入的第一頁
• 向後滑動

這樣你就不必處理z-indexes了。

(function() { 
    var running = false; 

    $('.buttons .next').on('click', function() { 
    if (!running) { 
     running = true; 
     $('#slide-pages').find('.page').last().animate({left: '-=700'}, 600, function() { 
     $(this).insertAfter('#slide-pages .buttons').animate({left: '+=700'}, 600, function() { 
      running = false; 
     }); 
     }); 
    } 
    }); 

    $('.buttons .prev').on('click', function() { 
    if (!running) { 
     running = true; 
     $('#slide-pages').find('.page').first().animate({left: '-=700'}, 600, function() { 
     $(this).appendTo('#slide-pages').animate({left: '+=700'}, 600, function() { 
      running = false; 
     }); 
     }); 
    } 
    }); 
}()); 

CSS

這是不是你的CSS，所以你可能要改變了一點。我只是想表明，你可以使用更少的代碼。例如。不要重複類似的屬性。

#slide-pages { 
    position: relative; 
    width: 662px; 
    margin-top: 10px; 
} 

#slide-pages .buttons .button { 
    position: absolute; 
    top: 0; 
    color: #fff; 
    cursor: pointer; 
    background: #000; 
    height: 34px; 
    width: 18px; 
    z-index: 100; 
} 

#slide-pages .buttons .next { 
    right: 60px; 
} 

#slide-pages .buttons .prev { 
    left: 30px; 
} 

#slide-pages .page { 
    position: absolute; 
    text-align: center; 
    width: 620px; 
    height: 60px; 
} 

#slide-pages .paper-one { 
    background: #f00; 
} 

#slide-pages .paper-two { 
    background: #333; 
    left: 20px; 
    top: 20px; 
} 

#slide-pages .paper-three { 
    background: #ccc; 
    left: 40px; 
    top: 40px; 
} 

演示：http://jsfiddle.net/3wfnN/3/

Answer 2

試試這個。

http://jsfiddle.net/Q6Czh/42/

我固定起來出頭。但你應該在它的工作