jquery動畫一個接一個的元素

我試圖用jQuery創建一個小動畫序列，但無法讓它工作！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高達320x240像素，而衰落span.expand out。發生這種情況後，我希望隱藏的p.fade段落淡入。

我只能同時獲得所有3個動畫，或者只有前兩個動畫發生，但第三個不會發生工作一切。

我知道這是關於如何寫jQuery的，但似乎無法得到它的工作！任何人都可以幫忙嗎？

來源

2010-09-13 Mr Jonny Wood

我在代碼中沒有看到'class =「talk」'，這是從哪裏來的？ – 2010-09-13 11:57:12

你使用的是什麼版本的jQuery？ – samy 2010-09-13 11:58:31

您指的是不在您的HTML中的'.char-lpool'。它是父母的div嗎？ – 2010-09-13 12:00:38

你打電話.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); } 
     ); 
});

You can test it here ... 或你可以通過最後的3個選項中爲單參數中的對象，但不是作爲單獨參數中的不同對象。

來源

2010-09-13 11:59:07

感謝尼克 - 你似乎回答了我的一些問題！ – 2010-09-13 12:28:20

此外，像jsfiddle site - 非常方便 – 2010-09-13 12:29:01

jquery動畫一個接一個的元素

回答

相關問題