Hello!

Someone tell me, please, why when you click on the button from the first time, the notification does not appear smoothly, but from the second time smoothly.

Here is an example - link

And here is the code:

<a class="add-to-cart addtocard-product" href="#">Щёлкни</a>

Js:

 $(document).on('click', '.add-to-cart', function (e) { var tekst = $('<div id="message-success"><p>Привет! Меня показывают и скрывают:)</p></div>'), linc = $('#jGrowl'); linc.html(tekst).fadeIn(); setTimeout(function() {linc.fadeOut();}, 2000); });

    1 answer 1

    Thanks to all!:)

    The mistake was that I lacked display: none; for div with id="jGrowl" .

     $(document).on('click', '.add-to-cart', function (e) { var tekst = $('<div id="message-success"><p>Привет! Меня показывают и скрывают:)</p></div>'), linc = $('#jGrowl'); linc.html(tekst).fadeIn(); setTimeout(function() {linc.fadeOut();}, 2000); }); 
     #message-success{ position: fixed; padding: 10px; margin: 0px; width: 299px; top: 20px; text-align: center; color: rgb(255, 255, 255); right: 20px; background-color:#79ad68; } #jGrowl{ margin: 0 12px 0 12px; right: 0px; top: 0px; display: none; } .addtocard-product{padding: 10px 0 10px 0;background: #1DB6BD;display: block;font-weight: bold;text-decoration: none;color: #fff;width: 200px;text-align: center;transition:0.4s 0.2s ease;-moz-transition:0.4s 0.2s ease;-o-transition:0.4s 0.2s ease;-webkit-transition:0.4s 0.2s ease;} .addtocard-product:hover{background: #03dae3;} 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <a class="add-to-cart addtocard-product" href="#">Щёлкни</a> <div id="jGrowl"></div>