я пытаюсь сделать простую функцию анимации в JQuery - PullRequest
Новая
       2

я пытаюсь сделать простую функцию анимации в JQuery

4 голосов
/ 23 декабря 2011

Я пытаюсь анимировать div , что мне нужно, когда нажимает кнопку Я хочу скрыть div и показать еще один div, следующий за дочерним.

вот мой fiddle.

Я пытаюсь сделать так этот сайт здесь вы можете увидеть, когда вы нажмете ссылку learmore , которая находится в верхнем правом углу, а затем еще один div-контентоткрыть, как скользящий.

Ответы [ 2 ]

1 голос
/ 23 декабря 2011

ДЕМО jsBin 

var c=0;
$('.slide:gt(0)').hide();
$('#learn').click(function(){
  c++;
  $('.slide').eq(c).css({zIndex:c}).show('slow');
});

HTML: 

  <div id="slider">
    <div id="learn">Learn more</div>
    <div class="slide s1">I'm slide 1</div>
    <div class="slide s2">I'm slide 2</div>
    <div class="slide s3">I'm slide 3</div>
  </div>

CSS: 

  #slider{
    position:relative;
    width:340px;
    height:340px;
  }
  #learn{
    position:absolute;
    right:0px;
    z-index:2;          /*set a higher Z-index if you have more slides*/
    cursor:pointer;
  }
  .slide{
    position:absolute;
    right:0px;         /*important!! To 'slide' from right to left*/
    top:0px;           
    width:300px;
    height:300px;
  }

Если у вас есть определенное количество слайдов, вы можете сохранить код без изменений, с другой стороны, я бы посоветовал вам - когда будет достигнут последний слайд - скрыть #learn программно с помощью jQuery. Дайте мне знать, если вам нужна помощь с этим.

Счастливое кодирование

0 голосов
/ 23 декабря 2011

Хватит ли что-то вроде этого: 

$('#divtohide').fadeOut('slow', function() {
  $('#divtoshow').fadeIn('slow');
});

При необходимости вы можете изменить идентификаторы.

EDIT

Проверьте эту скрипку: http://jsfiddle.net/MR5yv/1/

РЕДАКТИРОВАТЬ # 2

Проверьте эту скрипку: http://jsfiddle.net/MR5yv/2/

...