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/

我固定起来出头。但你应该在它的工作