CODEWITHSUNDEEP
javascriptjquery
H.A Ravindu
H.A Ravindu

Reputation: 13

How to use toggle animate() method in jQuery

I've created a simple animation using the jQuery animate() method.

simply when I clicked the button the brown box is animated, then I click it again it should reverse the animation(reset the box position).

when the button is clicked animation happens properly but the reset process is not working.

May I know if is there a way to use toggle() and animate() same time?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
    <link rel="stylesheet" href="Style.css">
    <title>Document</title>
</head>
<body>
    <div class="squre"></div>
    <div class="main"><h2>Click Me</h2></div>
    
    <script src="attion.js"></script>
</body>
</html>

body{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    background-color: tan;
    gap: 20px;
    
}

.main{
    text-align: center;
    height: 50px;
    width: 200px;
    cursor: pointer;
    border: 1px solid black;
}

.squre{
    width: 200px;
    height: 200px;
    background-color: brown;
    position: relative;
    left: -200px;
}

 $(document).ready(()=>{
    $('.main').click(()=>{
      $('.squre').animate({
        left: '200px',
        rotate:'300deg',
        width: '20',
        height: '20',
      },500)
    })
  })

I've created a simple animation using the jQuery animate() method.

simply when I clicked the button the brown box is animated, then I click it again it should reverse the animation(reset the box position).

when the button is clicked animation happens properly but the reset process is not working.

May I know if is there a way to use toggle() and animate() same time?

Upvotes: 1

Views: 93

Answers (1)

flyingfox
flyingfox

Reputation: 13506

We can use a global variable to store the current status,each time when we click,if will check the variable to determine animate or reset

Test code without toggle

$(document).ready(()=>{
    let animated = false
    $('.main').click(()=>{
      let params = {}
      if(animated){
         animated = false
         params = {
          width: '200px',
          height: '200px',
          'background-color': 'brown',
          'position': 'relative',
          left: '-200px',
          rotate:'-180deg'
         }
       }else{
         animated = true
         params = {
          left: '200px',
          rotate:'300deg',
          width: '20',
          height: '20',
         }
       }
      $('.squre').animate(params,500)
    })
  })
body{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    background-color: tan;
    gap: 20px;
    
}

.main{
    text-align: center;
    height: 50px;
    width: 200px;
    cursor: pointer;
    border: 1px solid black;
}

.squre{
    width: 200px;
    height: 200px;
    background-color: brown;
    position: relative;
    left: -200px;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <link rel="stylesheet" href="Style.css">
    <title>Document</title>
</head>
<body>
    <div class="squre"></div>
    <div class="main"><h2>Click Me</h2></div>
    
    <script src="attion.js"></script>
</body>
</html>

Note: If you are using old version of jQuery(under 1.9),then toggle method might be a better choice,if you want to simulate toggle,you can check at jquery-toggle-event-deprecated-what-to-use

Test code with toggle

$(document).ready(()=>{
    $('.main').toggle(function(){
      $('.squre').animate({
          left: '200px',
          rotate:'300deg',
          width: '20',
          height: '20',
       },500)
    },function(){
      $('.squre').animate({
          width: '200px',
          height: '200px',
          'background-color': 'brown',
          'position': 'relative',
          left: '-200px',
          rotate:'-180deg'
         },500)
    })
  })
body{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    background-color: tan;
    gap: 20px;
    
}

.main{
    text-align: center;
    height: 50px;
    width: 200px;
    cursor: pointer;
    border: 1px solid black;
}

.squre{
    width: 200px;
    height: 200px;
    background-color: brown;
    position: relative;
    left: -200px;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
    <link rel="stylesheet" href="Style.css">
    <title>Document</title>
</head>
<body>
    <div class="squre"></div>
    <div class="main"><h2>Click Me</h2></div>
    
    <script src="attion.js"></script>
</body>
</html>

Upvotes: 1

Related Questions