Question

I used this jquery to move a div by every click.

$(document).ready(function(){
    $('#hero').click(function(){
        $(this).animate({
            left: '+=50px'
    },300);
    })
})

I’d like to avoid jquery whenever it is possible to get deeper into pure JS.

Is there anyway to achieve the same effect without using jquery?

I know that this will be more complex, but just trying to learn.

Answer 1

you can use the same technique in javascript:

// get the object refrence
var hero_obj = document.getElementById('hero');

// attach the onclick event
hero_obj.onclick = function(){ 
    this.style.left = ( parseInt(this.style.left, 10) + 50 ) + 'px' 
};

However, the effect won’t be as smooth as jquery