JQuery анимировать слева с Z-индексом - PullRequest
Новая
       19

JQuery анимировать слева с Z-индексом

1 голос
/ 20 марта 2012

По клику (анимировать) сдвинуть влево и идти последним с 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);
    });
});​

Ответы [ 2 ]

0 голосов
/ 20 марта 2012

Я думаю, что вы подходите к этой проблеме слишком сложно (особенно в отношении 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

Код выполняет следующие действия:

  • выдвигает последнюю страницу (в коде !,!визуально он будет первым из-за position: absolute)
  • вставить его как первую страницу
  • задвинуть обратно

Таким образом, вам не придетсяиметь дело с z-индексами вообще. 

(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/

0 голосов
/ 20 марта 2012

попробуй это.

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

Я кое-что исправил.но ты должен работать над этим

...