I was trying working on animation through jQuery and I faced a problem that the div box work for only 2 clicks. Any kind of help is appreciated. Here is my code:
$(document).ready(function() {
$("#one").click(function() {
$("div").animate({
top: '250px'
});
});
$("#sec").click(function() {
$("div").animate({
bottom: '250px'
});
});
$("#thi").click(function() {
$("div").animate({
right: '250px'
});
});
$("#for").click(function() {
$("div").animate({
left: '250px'
});
});
});
.box {
background: grey;
height: 20px;
width: 20px;
position: absolute;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="one">DOWN</button>
<button id="sec">TOP</button>
<button id="thi">LEFT</button>
<button id="for">RIGHT</button>
<br><br>
<div class="box">
</div>
Here is my code link: https://jsfiddle.net/djmayank/mcutmbcy/1/
Updated fiddle.
You could "increase/decrease" just the top/right
offsets using +=
and -=
:
$(function(){
$("#one").click(function(){
$("div").animate({top: '+=25px'});
});
$("#sec").click(function(){
$("div").animate({top: '-=25px'});
});
$("#thi").click(function(){
$("div").animate({right: '+=25px'});
});
$("#for").click(function(){
$("div").animate({right: '-=25px'});
});
});
NOTE : You could use just one ready
function.
Hope this helps.
$(document).ready(function(){
$("#one").click(function(){
$("div").animate({top: '+=100px'});
});
$("#sec").click(function(){
$("div").animate({top: '-=100px'});
});
$("#thi").click(function(){
$("div").animate({right: '+=100px'});
});
$("#for").click(function(){
$("div").animate({right: '-=100px'});
});
});
.box{
background:grey;
height:20px;
width:20px;
position:absolute;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="one">DOWN</button>
<button id="sec">TOP</button>
<button id="thi">LEFT</button>
<button id="for">RIGHT</button>
<br><br>
<div class="box">
</div>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With