jQuery fade in and animate at the same time on document ready

30
September 11, 2019, at 09:50 AM

I have a modal popup that I'm trying to get to fade in and animate at the same time when the document is ready but I can't get it to function. I can fadeIn just fine:

$(document).ready(function () {
    $(".modal").fadeIn("slow");
});

But I can't get it to both fade in and animate. I have tried

$('.modal').animate({ opacity: 1, top: "-10px" }, 'slow');

But this doesn't work for me either. And advice would be appreciated.

Answer 1

You can use opacity animation:

$(document).ready(function () { 
	$('.modal').css('display', 'block'); //if you have display: none on the element 
	$('.modal').animate({ opacity: 0 }, 0); 
    $('.modal').animate({ opacity: 1, top: "-10px" }, 'slow'); 
});
.modal { 
  height: 200px; 
  width: 200px; 
  background-color: red; 
  display: none; 
  position: absolute; 
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<div class="modal">Some content</div>

READ ALSO
Is it possible to pass raw video frame TO a browser?

Is it possible to pass raw video frame TO a browser?

Is possible to pipe raw video frames to a browser/website? For instance the decoding could be done locally in Gstreamer, and then that could be forwarded somehow to a browser

43
Navbar link margin classes seem repetitive in Tailwind CSS, is there a better way?

Navbar link margin classes seem repetitive in Tailwind CSS, is there a better way?

Having to add margin classes to each LI seems REALLY repetitive on a menu that is not being dynamically generatedThis feels dirty like using style="" attributes

29
What is this &ldquo;normalize.less&rdquo; I see in F12 Developer Console?

What is this “normalize.less” I see in F12 Developer Console?

I am having trouble finding information on this "normalizeless" thing I'm seeing in the Chrome 76 developer console

42
SQL ANY &amp; ALL Operators [closed]

SQL ANY & ALL Operators [closed]

I have started using sql and have heard much about the ANY and ALL operatorsCan somebody explain to me the kind of queries they are used in and how they work?

32