4

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.

ThatGuy343
  • 2,354
  • 3
  • 30
  • 55
  • http://stackoverflow.com/questions/1251300/how-to-run-two-jquery-animations-simultaneously – aadarshsg Jun 12 '15 at 03:14
  • 1
    This could always be done with css too. The more you can do without js the better. https://jsfiddle.net/796og4z5/1/ Just add/remove a class – Sam Eaton Jun 12 '15 at 03:22

2 Answers2

6

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>
Arun P Johny
  • 384,651
  • 66
  • 527
  • 531
1
    obj.slideDown({duration: 450, queue: false});
    obj.stop().fadeTo(1000, 1);

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

Community
  • 1
  • 1
aadarshsg
  • 2,069
  • 16
  • 25