Пошаговая анимация

342
17 января 2017, 22:41

Нужно чтобы при щелчке внешний блок появлялся с помощью функции slideDown, и только после его появления внутренний абзац появлялся c помощью анимации

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

Answer 1

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

Answer 2

Если я вас правильно понял то ошибка в синтаксисе 

$('.imag').click(function() {
    $('div:last').slideDown(1000, function() {
        $('div:last p').animate({
            opacity: 1 //тут без ;
        });
    });
});
Answer 3

Вариант на css

* { 
  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>

READ ALSO
HTML: перебор произвольных DOM-элементов клавишей Tab
HTML

HTML: перебор произвольных DOM-элементов клавишей Tab

Допустим, я хочу чтобы чтобы на любые DOM-элементы (например, на <div>ы указанного класса) можно было наводиться клавишей Tab, как это можно делать...

 380
Нужна помощь в построении массива меню WordPress
HTML

Нужна помощь в построении массива меню WordPress

У меня есть вот такая верстка:

 318
Авторизация в СУБД MySQL в связке с [WPF + MVVM + Entity Framework]
c#

Авторизация в СУБД MySQL в связке с [WPF + MVVM + Entity Framework]

Есть приложение WPF, разделенное на три части согласно паттерну MVVMПриложение работает с БД MySql средствами Entity Framework 6

 485
Не сохраняется добавление записи в БД, EF
c#

Не сохраняется добавление записи в БД, EF

Есть банальная табличка

 389