Expanding and contracting div animations

Question

Expanding and contracting div animations

My goal is to create a never-ending animation for a div element:

$(document).ready(function() {
  function arrowmovement() {
    setTimeout(function() {
      $("#downarrowimg").animate({
        'margin-top': "-=30px"
      });
    }, 500);
    setTimeout(function() {
      $("#downarrowimg").animate({
        'margin-top': "+=30px"
      });
    }, 500);
  }
  arrowmovement();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="downarrow">
  <img id="downarrowimg" src="https://upload.wikimedia.org/wikipedia/en/f/f1/Down_Arrow_Icon.png">
</div>

I am facing the issue of the animation running only once. Can someone help me identify what I am doing wrong and provide guidance on how to resolve it?

javascript jquery html css

Answer 1

Answer №1

Check out this super simple CSS trick that will make the #downarrow element animate smoothly:

@keyframes downarrowanimation {
    0% {margin-top: 30px;}
    50% {margin-top: -30px;}
    100% {margin-top: 30px;}
}

#downarrow {
    animation: downarrowanimation 1s ease-in-out infinite;
}

<div id="downarrow">
<img id="downarrowimg" src="https://upload.wikimedia.org/wikipedia/en/f/f1/Down_Arrow_Icon.png">
</div>

Answer 2

Check out this super simple CSS trick that will make the #downarrow element animate smoothly:

@keyframes downarrowanimation {
    0% {margin-top: 30px;}
    50% {margin-top: -30px;}
    100% {margin-top: 30px;}
}

#downarrow {
    animation: downarrowanimation 1s ease-in-out infinite;
}

<div id="downarrow">
<img id="downarrowimg" src="https://upload.wikimedia.org/wikipedia/en/f/f1/Down_Arrow_Icon.png">
</div>

Answer 3

Answer №2

If you're looking for ways to achieve that, my recommendation would be to utilize the setInterval() function. Feel free to explore the provided example below.

Hopefully, this explanation proves beneficial.

var movingDown = true;

setInterval(function() {
  if (movingDown) {
      $( "#downarrowimg" ).animate({
        'margin-top' : "-=30px"
      }, function() {
        movingDown = false;
      });
  } else {
    $( "#downarrowimg" ).animate({
        'margin-top' : "+=30px"
    }, function() {
        movingDown = true;
    });
  }
},500);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="downarrow">
  <img id="downarrowimg" src="https://upload.wikimedia.org/wikipedia/en/f/f1/Down_Arrow_Icon.png">
</div>

Answer 4

If you're looking for ways to achieve that, my recommendation would be to utilize the setInterval() function. Feel free to explore the provided example below.

Hopefully, this explanation proves beneficial.

var movingDown = true;

setInterval(function() {
  if (movingDown) {
      $( "#downarrowimg" ).animate({
        'margin-top' : "-=30px"
      }, function() {
        movingDown = false;
      });
  } else {
    $( "#downarrowimg" ).animate({
        'margin-top' : "+=30px"
    }, function() {
        movingDown = true;
    });
  }
},500);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="downarrow">
  <img id="downarrowimg" src="https://upload.wikimedia.org/wikipedia/en/f/f1/Down_Arrow_Icon.png">
</div>

Answer 5

Answer №3

$(document).ready(function() {
  function moveArrowUp() {
    $("#downarrowing").animate(
    {'margin-top': "-=30px"}, 600, function(){moveArrowDown()});
  }

  function moveArrowDown() {
  $("#downarrowing").animate(
    {'margin-top': "+=30px"}, 600, function(){moveArrowUp()});
  }
moveArrowUp();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <img id="downarrowing" src="https://upload.wikimedia.org/wikipedia/en/f/f1/Down_Arrow_Icon.png">
</div>

Answer 6

$(document).ready(function() {
  function moveArrowUp() {
    $("#downarrowing").animate(
    {'margin-top': "-=30px"}, 600, function(){moveArrowDown()});
  }

  function moveArrowDown() {
  $("#downarrowing").animate(
    {'margin-top': "+=30px"}, 600, function(){moveArrowUp()});
  }
moveArrowUp();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <img id="downarrowing" src="https://upload.wikimedia.org/wikipedia/en/f/f1/Down_Arrow_Icon.png">
</div>

Answer 7

Answer №4

The animate method allows you to incorporate full functionality without the need for a timeout.
You could also consider using a pure CSS animation, as mentioned by Rounin.

.animate()

complete Type: Function() A function that executes once the animation is finished, runs once for each matched element.

Here's an example.

$( document ).ready(function() {
    function arrowmovement() {
        var d = ($( "#downarrowimg" ).css('margin-top') === "-30px") ?  "+" : "-";
        $( "#downarrowimg" ).animate({
            'margin-top' : d + "=30px"
        }, 500, // duration
function() { // complete fn
            arrowmovement();
        });
    }
    arrowmovement();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="downarrow">
  <img id="downarrowimg" src="https://upload.wikimedia.org/wikipedia/en/f/f1/Down_Arrow_Icon.png">
</div>

Answer 8

The animate method allows you to incorporate full functionality without the need for a timeout.
You could also consider using a pure CSS animation, as mentioned by Rounin.

.animate()

complete Type: Function() A function that executes once the animation is finished, runs once for each matched element.

Here's an example.

$( document ).ready(function() {
    function arrowmovement() {
        var d = ($( "#downarrowimg" ).css('margin-top') === "-30px") ?  "+" : "-";
        $( "#downarrowimg" ).animate({
            'margin-top' : d + "=30px"
        }, 500, // duration
function() { // complete fn
            arrowmovement();
        });
    }
    arrowmovement();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="downarrow">
  <img id="downarrowimg" src="https://upload.wikimedia.org/wikipedia/en/f/f1/Down_Arrow_Icon.png">
</div>

Answer 9

Answer №5

If you want to create a repeating animation, setInterval() is the way to go.

$(document).ready(function() {
  var repeatAnimation = setInterval(arrowMovement, 1000);
  function arrowMovement() {
    setTimeout(function() {
      $("#downArrowImg").animate({
        'margin-top': "-=30px"
      });
    }, 500);
    setTimeout(function() {
      $("#downArrowImg").animate({
        'margin-top': "+=30px"
      });
    }, 500);
  }

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="downArrow">
  <img id="downArrowImg" src="https://upload.wikimedia.org/wikipedia/en/f/f1/Down_Arrow_Icon.png">
</div>

To stop the timer, store it in a variable:

function stopAnimationTimer() { // call this when you want to stop the animation
  clearInterval(repeatAnimation);
}

Answer 10

If you want to create a repeating animation, setInterval() is the way to go.

$(document).ready(function() {
  var repeatAnimation = setInterval(arrowMovement, 1000);
  function arrowMovement() {
    setTimeout(function() {
      $("#downArrowImg").animate({
        'margin-top': "-=30px"
      });
    }, 500);
    setTimeout(function() {
      $("#downArrowImg").animate({
        'margin-top': "+=30px"
      });
    }, 500);
  }

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="downArrow">
  <img id="downArrowImg" src="https://upload.wikimedia.org/wikipedia/en/f/f1/Down_Arrow_Icon.png">
</div>

To stop the timer, store it in a variable:

function stopAnimationTimer() { // call this when you want to stop the animation
  clearInterval(repeatAnimation);
}

Answer 11

Answer №6

Have you considered using CSS for this task? By utilizing CSS, you not only achieve a visually appealing design but also benefit from the animation being smoothly rendered by the GPU.

@keyframes bounce {
  from {margin-top: 30px;}
  to {margin-top: -30px;}
}

.arrow {
  animation-name: bounce;
  animation-duration: 1s;
  animation-direction: alternate;
  animation-iteration-count: infinite;
}

<div id="downarrow">
      <img class="arrow" src="https://upload.wikimedia.org/wikipedia/en/f/f1/Down_Arrow_Icon.png">
    </div>

Answer 12

Have you considered using CSS for this task? By utilizing CSS, you not only achieve a visually appealing design but also benefit from the animation being smoothly rendered by the GPU.

@keyframes bounce {
  from {margin-top: 30px;}
  to {margin-top: -30px;}
}

.arrow {
  animation-name: bounce;
  animation-duration: 1s;
  animation-direction: alternate;
  animation-iteration-count: infinite;
}

<div id="downarrow">
      <img class="arrow" src="https://upload.wikimedia.org/wikipedia/en/f/f1/Down_Arrow_Icon.png">
    </div>

Answer 13

Answer №7

For a smooth animation transition, simply trigger the arrowmovement function once each animation is complete:

function arrowmovement(direction) {
    $("#downarrowimg").animate({
        'margin-top': "+="+ (30 * direction) +"px"
    }, 500, function() {
        arrowmovement(direction * -1);
    });
}

$(document).ready(function() {
    arrowmovement(1);
});

Check out the live demo here: https://jsfiddle.net/louisbros/dhwoejon/

Answer 14

For a smooth animation transition, simply trigger the arrowmovement function once each animation is complete:

function arrowmovement(direction) {
    $("#downarrowimg").animate({
        'margin-top': "+="+ (30 * direction) +"px"
    }, 500, function() {
        arrowmovement(direction * -1);
    });
}

$(document).ready(function() {
    arrowmovement(1);
});

Check out the live demo here: https://jsfiddle.net/louisbros/dhwoejon/

Answer 15

Answer №8

This explanation is presented in a straightforward manner.

$(document).ready(function (arg) {
     var direction = '-';
     setInterval(arrowMovement,500);
     function arrowMovement() {
        if(direction == '-') {
             direction = '+';
        } else {
             direction = '-';
        }

        $('#downarrow').animate({'margin-top':direction+10}, 500);
     }
 });

Answer 16

This explanation is presented in a straightforward manner.

$(document).ready(function (arg) {
     var direction = '-';
     setInterval(arrowMovement,500);
     function arrowMovement() {
        if(direction == '-') {
             direction = '+';
        } else {
             direction = '-';
        }

        $('#downarrow').animate({'margin-top':direction+10}, 500);
     }
 });

Answer 17

Answer №9

For those seeking better animation options, the Greensock Animation Package (GSAP) is highly recommended over jQuery. It offers a superb and lightweight animation library that can meet your needs.

TweenMax.to($("div"), .5, {y: "+=50", ease: Linear.easeNone, yoyo: true, repeat: -1});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.1/TweenMax.min.js"></script>
<div style="width: 50px; height: 50px; background-color: red;"></div>

An efficient one-liner can handle all your basic animations. If you require more intricate easing effects, consider using the TimelineMax class to link animations together.

var timeline = new TimelineMax({repeat: -1});
timeline.to($("div"), .5, {y: "+=50", ease: Power2.easeOut});
timeline.to($("div"), .5, {y: "-=50", ease: Power2.easeOut});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.1/TweenMax.min.js"></script>
<div style="width: 50px; height: 50px; background-color: red;"></div>

Answer 18

For those seeking better animation options, the Greensock Animation Package (GSAP) is highly recommended over jQuery. It offers a superb and lightweight animation library that can meet your needs.

TweenMax.to($("div"), .5, {y: "+=50", ease: Linear.easeNone, yoyo: true, repeat: -1});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.1/TweenMax.min.js"></script>
<div style="width: 50px; height: 50px; background-color: red;"></div>

An efficient one-liner can handle all your basic animations. If you require more intricate easing effects, consider using the TimelineMax class to link animations together.

var timeline = new TimelineMax({repeat: -1});
timeline.to($("div"), .5, {y: "+=50", ease: Power2.easeOut});
timeline.to($("div"), .5, {y: "-=50", ease: Power2.easeOut});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.1/TweenMax.min.js"></script>
<div style="width: 50px; height: 50px; background-color: red;"></div>

Expanding and contracting div animations

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Answer №7

Answer №8

Answer №9

Similar questions

Incorporating React State into CSS Styles

Using jQuery to extract the value of 'selectedValue' from RadDropDownList

Parent div not properly adjusting its height

Could converting a 47-byte JSON string into 340 MB be possible through JSON stringification?

What is the best way to customize a MaterialUI outlined input using a global theme overrides file?

Instructions for positioning a 3d cube within another 3d cube with the help of three.js

Creating a secure Angular pipe to prevent DomSanitizer from removing content

Issue with Angular CDK table: The element 'td' cannot be placed inside of the element 'table'

Guide on utilizing the npm package gs1-barcode-parser

Tips for locating a value that differs from an item in a v-autocomplete box

Display a vibrant welcome screen on an Android WebView that ensures a visually appealing experience while the content loads for the

Eliminate the character """ from the HTML code

Setting autoComplete=true does not impact the Autocomplete feature of MUI

Encountering difficulties accessing the array in the controller through ajax

Utilizing AngularJS 1.X to implement filters on transformed information

Guide on adding multiple values to a single key in JavaScript

Tips for efficiently webscraping multiple pages with Beautiful Soup

Are brackets or parentheses allowed in URLs?

Is using cors middleware essentially the equivalent of setting headers in a request?

Getting the value of a variable within the scope of AngularJS can be achieved by utilizing