When clicking, the external block needs to appear using the slideDown function, and only after its appearance the internal paragraph appears using the animation.

$('.imag').click(function(){ $('div:last').slideDown(1000,function(){ $('div:last p').animate( { opacity: 1; }); }); }); 
 div:last-of-type { width: 300px; height: auto; position: absolute; right: 40%; top:30%; padding-top:20px; background: gray; display: none; } div:last-of-type p { opacity: 0; background: white; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <span class="imag">123</span> <div> <p>Заголовок заголовок</p> <img src="../1304109321_324_1280.jpg" alt="картинка" style="width:100%"></div>

    3 answers 3

     $('.button').click(function() { $('.hiddenDiv').slideDown(1000); setTimeout(function() { $('.hiddenDiv p').animate({ opacity: 1 }); }, 1000); }); 
     .hiddenDiv { width: 300px; height: auto; position: absolute; right: 40%; top: 30%; padding-top: 20px; background: gray; display: none; } .hiddenDiv p { opacity: 0; background: white; } 
     <!DOCTYPE HTML> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <meta charset="utf-8"> </head> <body> <span class="button">Кнопка</span> <div class="hiddenDiv"> <p>Заголовок заголовок</p> <img src="http://www.sourceoneinc.com/wp-content/uploads/2015/11/IMG_Client.png"> </div> </body> </html>

      If I understand you correctly then the error in the syntax

       $('.imag').click(function() { $('div:last').slideDown(1000, function() { $('div:last p').animate({ opacity: 1 //тут без ; }); }); });
      • Yes, you understood me correctly - Koly

      Css option

       * { padding: 0; margin: 0; box-sizing: border-box; } .b { max-width: 300px; margin: 10px auto; border: 1px solid #ccc; padding: 20px; font-family: sans-serif; text-align: center; } .b-button { display: none; } .b-button + label { display: inline-block; padding: 15px 15%; background: #ccc; font-size: 14px; transition: .3s; } .b-button:checked + label { margin-bottom: 15px; color: #fff; background: green; } .b-button:checked + label ~ .b-inner { max-height: 500px; } .b-inner { background: #999; overflow: hidden; max-height: 0; transition: max-height 1s; } .b-inner > h3 { color: #fff; background: green; padding: 5px; animation: animTitle 2s linear forwards; } @keyframes animTitle { 0%, 50% { transform: scale(0); } 100% { transform: scale(1); } } 
       <div class="b"> <input type="checkbox" id="button" class="b-button"> <label for="button">button</label> <div class="b-inner"> <h3>Заголовок заголовок</h3> <img src="http://www.sourceoneinc.com/wp-content/uploads/2015/11/IMG_Client.png"> </div> </div>