How to animate each div individually

386

January 18, 2017, at 4:51 PM

I am trying to show products and when I apply the animation it applies to the whole div

for instance

<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.
}

What I want that one by one the product slides in from right.

Answer 1

Check this out

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

Answer 2

Try to call the animation one after another.i.e, inside the success function of one animation, include the next one. Hope this code will help you.

<!DOCTYPE html> 
<html> 
 
<head> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
    <script> 
        $(document).ready(function () { 
            $("button").click(function () { 
                $("#product1").slideUp("slow", function () { 
                    $("#product2").slideUp("slow", function () { 
                        $("#product3").slideUp("slow", function () { 
                            $("#product4").slideUp("slow", function () { 
                                $("#product5").slideUp("slow", function () {}); 
                            }); 
                        }); 
                    }); 
                }); 
            }); 
        }); 
    </script> 
</head> 
 
<body> 
 
    <button>Start Animation</button> 
    <div class="product_area"> 
        <div class="product" id="product1">1</div> 
        <div class="product" id="product2">2</div> 
        <div class="product" id="product3">3</div> 
        <div class="product" id="product4">4</div> 
        <div class="product" id="product5">5</div> 
    </div> 
</body> 
 
</html>

Answer 3

try remove jquery function.

<!DOCTYPE html>
<html>
<head>
    <title></title>
</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>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
    // $(".product_area").slideUp(); //Whole div slides up.
    // setInterval(function(){  $(".product:first()").next(".product").slideUp()}, 50000);
    function shiftDivs()
        {
            $('.product:first').remove();
            $('.product:last').before(); // Pseudo
        }
        setInterval(function()
        {
            shiftDivs();
        }, 2000);
    // $(".product").slideUp(); //Just one product slides up.
})

POPULAR ONLINE

Learn, Share, Build

How to update class in AngularJS directive

How to view the messages in consolelog (nodejs) in html

How to measure execution time of a particular block of code in Cloud Function for Firebase?

Fade borders of image without box-shadow

Arrow Right Type Sidebar

I've been banging this problem for hours and still can't figure out how to achieve this arrow right type sidebarI want the look of my sidebar like this

411

jQuery

Force file save dialog

I'm having trouble trying to force a browser to open the file save dialogI'm using Content-Disposition header and attachment, also I'm using download attribute of the <a> tag

411

jQuery

How to remove Readonly prop from all above elements on buttonclick

I have a form with input field where readonly is true

369

jQuery

Hibernate Query 3 Nested select

How can I fix this query for currect work?

491