javascript - 在没有 JQuery 的情况下通过每次点击移动 Div

Question

我使用这个 jquery 通过每次点击移动一个 div。

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

只要有可能深入纯 JS，我都想避免使用 jquery。

有没有不用jquery也能达到同样效果的方法？

我知道这会更复杂，但只是想学习。

Answer 1

您可以在 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' 
};

但是效果不会像jquery那么流畅