JQuery анимировать один элемент за другим - PullRequest
Новая
       23

JQuery анимировать один элемент за другим

0 голосов
/ 13 сентября 2010

Я пытаюсь создать небольшую последовательность анимаций с помощью jQuery, но не могу заставить ее работать!

HTML: 

<div class="outer">
   <div class="inner">
      <p>First line visable.</p>
      <span class="expand">Read more</span>
      <p class="fade">Line one</p>
      <p class="fade">Line two</p>
      <p class="fade">Line three</p>
      <p class="fade">Line four</p>
    </div>
</div>

CSS: 

.inner {
    position:relative;
    left:100px;
    width:260px;
    padding:8px 14px 10px 14px;
    background:#FFF;
    border:1px solid #CAC9C1;
    -webkit-border-radius:8px;
    -moz-border-radius:8px;
    border-radius:8px }

    .inner span.expand {
        position:absolute;
        top:10px;
        right:10px;
        display:block;
        width:12px;
        height:12px;
        text-indent:-999em;
        cursor:pointer;
        background:transparent url(imgs/bg-sprite.png) no-repeat -580px -464px }

    .inner span.expand:hover { background-position:-580px -478px }

    .inner p.fade { display:none }

jQuery: 

$('.char-lpool .expand').click(function(){
    $(this).stop().fadeOut({duration:200})
    $(this).parent().stop().animate(
        {top:"-240"}, 
        {duration:300},
        {easing: 'easeOutCubic'}), function() {
        $('.char-lpool .talk p.fade').stop().fadeIn({duration:200})
    }
});

Нажав на span.expand, я хочу сначала переместить div.inner вверх на 240px, пока исчезает span.expand out.После того, как это произошло, я хочу, чтобы скрытые абзацы p.fade исчезли.

Я могу получить только все 3 анимации одновременно, или с помощью приведенного выше кода происходят только первые 2 анимации, третьяне работает t все.

Я знаю, что все зависит от того, как я написал jquery, но не могу заставить его работать !!Кто-нибудь может помочь?

1 Ответ

1 голос
/ 13 сентября 2010

Вы звоните на .animate(), немного отключен, параметры должны выглядеть следующим образом: 

$('.char-lpool .expand').click(function(){
  $(this).stop().fadeOut({duration:200})
         .parent().stop().animate(
           {top:"-240"}, 
           300,
           'easeOutCubic', 
           function() { $(this).find('p.fade').stop().fadeIn(200); }
         );
});

Вы можете проверить это здесь ... или Вы можете передать последние 3 параметра как один параметр в объекте, но не как отдельные объекты в отдельных параметрах.

...