Question

我正在尝试使用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淡出。在那之后我想要隐藏的p.fade段落淡入。

我只能同时发生所有3个动画，或者上面的代码只发生前2个动画，第三个动画不起作用。

我知道这取决于我如何编写jquery，但似乎无法让它工作！有人可以帮忙吗？

Answer 1

您致电.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个选项作为单个参数传递给对象，但不能作为单独参数中的不同对象传递。

jquery动画一个接一个的元素

1 个答案: