Как анимировать каждый Див индивидуально

Я пытаюсь показать продукты, и когда я применить анимацию он относится ко всему divКак анимировать каждый Див индивидуально

, например

<div class="product_area"> 
    <div class="product">1</div> 
    <div class="product">2</div> 
    <div class="product">3</div> 
    <div class="product">4</div> 
    <div class="product">5</div> 
</div> 

$(document).ready(function() 
{ 
    $(".product_area").slideUp(); //Whole div slides up. 
    $(".product").slideUp(); //Just one product slides up. 
}

То, что я хочу, чтобы один от один слайдов продукции из справа.

источник

2017-01-18 Ali Rasheed

Вы можете добавить plunker? – Nitheesh

Что такое плукер? –

Я только что проверил ваш код здесь ... с помощью '$ ('. Product'). SlideUp()' все продукты одновременно перемещаются вверх. – Rodrigo

Проверить это

$(function(){ 
 
    //$(".product_area").slideUp(); //Whole div slides up. 
 
    //$(".product").slideUp(); //Just one product slides up. 
 
    var delay = 500 
 
    $('.product').each(function(){ 
 
    $(this).delay(delay).toggle("slide"); 
 
    delay = delay+1500; 
 
}); 
 
});

/* Put your css in here */ 
 

 
.product { 
 
    display:none; 
 
    width:100px; 
 
    background-color:#ccc; 
 
    padding:15px; 
 
    margin-bottom: 20px; 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
    <head> 
 
    <meta charset="utf-8" /> 
 
    <title></title> 
 
    <link rel="stylesheet" href="style.css" /> 
 
    <script data-require="jquery" data-semver="3.0.0" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script> 
 
    <script src="script.js"></script> 
 
    </head> 
 

 
    <body> 
 
    <div class="product_area"> 
 
    <div class="product">1</div> 
 
    <div class="product">2</div> 
 
    <div class="product">3</div> 
 
    <div class="product">4</div> 
 
    <div class="product">5</div> 
 
</div> 
 
    </body> 
 

 
</html>

источник

2017-01-18 10:50:12 Sharmila

Это то, что я искал благодаря! –

Приветствуем Уэйн :) – Sharmila

Как анимировать каждый Див индивидуально

ответ

Смежные вопросы