Here is a snippet of jQuery code that I included in a sample program:
$('#left').click(function(){
$('.box').animate({
left: "-=40px",
}, function(){/* End of Animation*/});
});
$('#right').click(function(){
$('.box').animate({
right: "-=40px",
}, function(){ /* End of Animation*/});
});
$('#up').click(function(){
$('.box').animate({
top: "-=40px",
}, function(){/* End of Animation*/});
});
$('#down').click(function(){
$('.box').animate({
bottom: "-=40px",
}, function(){ /* End of Animation*/});
});
This is the HTML for the program:
<div class="box">a box</div>
<div id="navArrows">
<button id="left" class="navigationArrow">←</button>
<button id="up" class="navigationArrow">↑</button>
<button id="right" class="navigationArrow">→</button>
<button id="down" class="navigationArrow">↓</button>
</div>
And here is the accompanying CSS:
#navArrows {
position: relative;
width: 150px;
height: 150px;
margin: 100px auto 0;
background: #333;
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 100px;
padding: 20px;
}
.navigationArrow {
width: 50px;
height: 50px;
line-height: 50px;
padding: 0;
margin: 0;
position: absolute;
top: 20px;
left: 20px;
background: white;
color: #222;
}
#up {
left: 50%;
margin-left: -25px;
}
#left, #right {
top: 50%;
margin-top: -25px;
}
#right {
right: 20px;
left: inherit;
}
#down {
bottom: 20px;
top: inherit;
left: 50%;
margin-left: -25px;
}
.box {
height: 100px;
width: 100px;
background: #a7f;
color: white;
border: solid 4px #a1f;
line-height: 100px;
margin: 100px auto 0;
opacity: 0.5;
position: relative;
}
The purpose of this code is to move the div.box based on which button is clicked. The logic seems straightforward using the appropriate positions for each button click, but there may be some confusion with the code.
However, it works as intended when using the following values:
For Right and Left Buttons
{left: "-=40px"} or {left: "+=40px"} or {right: "-=40px"} or {right: "+=40px"}
For Up and Down Buttons
{top: "-=40px"} or {top: "+=40px"} or {bottom: "-=40px"} or {bottom: "+=40px"}Any clarification or insights on this would be greatly appreciated.