jQuery Animate onClick

by Harsh Bhatnagar

HTML

<div class="Cont1">Grid goes below this div
    <div class="vid" id="block">This is Grid</div>
</div>
<button id="go1">Previous</button>
<button id="go">Next</button>

CSS

.Cont1 {
    background: red;
    margin: 10px;
    color: #fff
}

.vid {
    width: 20px;
    height: 20px;
    background: green;
    margin: 10px;
}

JavaScript

$("#go").click(function() {
    var dest = parseInt($("#block").css("margin-left").replace("px", "")) + 50;
    if (dest > 500) {
        $("#block").animate({
            marginLeft: "10px"
        }, 500);
    } else {
        $("#block").animate({
            marginLeft: dest + "px"
        }, 500);
    }
});
$("#go1").click(function() {
    var dest = parseInt($("#block").css("margin-left").replace("px", "")) - 50;
    if (dest > 500) {
        $("#block").animate({
            marginLeft: "10px"
        }, 500);
    } else {
        $("#block").animate({
            marginLeft: dest + "px"
        }, 500);
    }
});