JQuery fade in while sliding down?

Question

The script below does not fire the slideDown and fadeTo at the same time. It does not fade in until the slide down finishes.

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

How can I simultaneously slide the object down while also fading it in?

Also, the object is just a normal div.

Answer 1

When you use slideDown and fadeTo, both of these calls are added to a queue(fx queue) and is executed one after another.

You can use .animate() to animate a set of css properties

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

Answer 2

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

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