How do I make a <li> jump up and down using JQuery?
I have a horizontal navigation menu with a "JOIN" element. I want the element to #jump
bounce up and down indefinitely shortly after the page loads.
This has an effect, but only once and only on hover:
<script type="text/javascript">
$('#jump').hover(function(){
$(this).animate({bottom:'5px'},'fast');
}, function() {
$(this).animate({bottom:'0px'},'fast');
});
</script>
if i do: ready()
it stops working.
+3
source to share
2 answers
Why is jquery just doing css animation
#some{
border-radius:100%;
width:50px;
height:50px;
background:#ccc;
animation:top 0.3s ease-in infinite; /*change the animation transition effect as your wish*/
}
@keyframes top{
from{transform:translateY(0px);}
to{transform:translateY(10px);}
}
<div id="some"></div>
+9
source to share
$("#jump").slideUp(2000).slideDown(2000);
details are available at: https://www.w3schools.com/jquery/jquery_chaining.asp
-3
source to share