$("[data-animate2]").click(function() { var $this = $(this); var $animDir = $this.data("animate2"); var $animDist = $this.data("distance"); var $animSpd = $this.data("speed"); if ($animDir == "left") { $(this).animate({ "left": $animDist }, $animSpd); } else if ($animDir == "right") { $(this).animate({ "left": $animDist }, $animSpd); } }); $(".undo").click(function(t) { t.preventDefault(); $(this); $(".example-animates").find(".fa").css("left", 0); });
<div class="container"> <h2>Animate Images/Icons in JavaScript using jQuery animate function - The Data- method #2<small><small><a class="btn btn-link btn-sm undo" role="button" href="#"><i class="fa fa-undo"></i></a></small></small> </h2> <small>Click on arrow icons to animate. Click the reset icon to reset icons.</small> <section class="example-animates"> <div class="d-flex justify-content-center"><i class="fa fa-arrow-left fa-3x" data-animate2="left" data-distance="-=100px" data-speed="slow"></i></div> <div class="d-flex justify-content-center"><i class="fa fa-arrow-right fa-3x" data-animate2="right" data-distance="+=120px" data-speed="fast"></i></div> </section> </div>
.example-animates { overflow: hidden; margin-bottom: 1rem; } .example-animates i { position: relative; cursor: pointer; }