Question

以下脚本不会同时触发 slideDown 和 fadeTo 。在滑下完成之前它不会淡入。

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

如何同时向下滑动物体同时将其淡入？

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

Answer 1

当您使用slideDown和fadeTo时，这两个调用都会被添加到队列（fx队列中）并一个接一个地执行。

您可以使用.animate()为一组css属性设置动画

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

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

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

Don't queue fadeTo(), fadeIn()/fadeOut()

JQuery在滑落时淡入淡出？

2 个答案: