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.
})
Rent Charter Buses Company
READ ALSO
Arrow Right Type Sidebar

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
Force file save dialog

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
How to remove Readonly prop from all above elements on buttonclick

How to remove Readonly prop from all above elements on buttonclick

I have a form with input field where readonly is true

369
Hibernate Query 3 Nested select

Hibernate Query 3 Nested select

How can I fix this query for currect work?

491