jQuery滑动时淡入效果？

Question

下面的脚本不能同时触发 slideDown 和 fadeTo。只有当下拉完成后，淡入才会开始。

    <script>
    $( document ).ready(function() {
        var obj = $("#example");
        obj.slideDown(450);
        obj.fadeTo(450,1);
    });
    </script>

我该如何在让对象淡入的同时将其向下滑动？

此外，该对象只是一个普通的

。

- ThatGuy343

---

https://dev59.com/6XM_5IYBdhLWcg3wvFzJ - aadarshsg

这也可以通过CSS来完成。越多不需要JavaScript的操作，就越好。https://jsfiddle.net/796og4z5/1/ 只需添加/删除一个类即可。 - Sam Eaton

Answer 1

当您使用slideDown和fadeTo时，这两个调用都被添加到一个队列(fx队列)中，并依次执行。

您可以使用.animate()来动画化一组CSS属性。

$(document).ready(function () {
    var obj = $("#example");
    obj.animate({
        opacity: 1,
        height: 'show'
    }, 450);
});

$(document).ready(function() {
  var obj = $("#example");
  obj.animate({
    opacity: 1,
    height: 'show'
  }, 450);
});

#example {
  display: none;
  opacity: 0;
  white-space: pre-line;
  border: 1px solid red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="example">
$(document).ready(function () {
    var obj = $("#example");
    obj.slideDown(450);
    obj.fadeTo(450, 1);
});
</div>

- Arun P Johny

Answer 2

    obj.slideDown({duration: 450, queue: false});
    obj.stop().fadeTo(1000, 1);

不要排队使用fadeTo()、fadeIn()/fadeOut()函数

- aadarshsg