关于this和$(this)的使用问题

最近要做一个js+css动画效果，大体效果就是一张图片，点击的时候就让他匀速运动到页面最上方，然后把这个图片自己删除。

 

反复尝试了很多次，发现this和$(this)有时候会用混，导致很多效果不方便处理。

 

this得到的是一个html，你可以直接对他使用style改变样式。

$(this)得到的是一个jquery对象，你可以使用addclass直接添加样式，然后remove（）直接删除自己。

 

我最后的JS代码如下：

 

 $(".inls").on("click", function (e) {
            $(this).addClass("fadeOutUpBig");
            setTimeout(function () { $(this).remove(); },1000);
        })

 

Css代码如下：

 

@-webkit-keyframes fadeOutUpBig {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        -webkit-transform: translate3d(0, -2000px, 0);
        transform: translate3d(0, -2000px, 0);
    }
}

@keyframes fadeOutUpBig {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        -webkit-transform: translate3d(0, -2000px, 0);
        transform: translate3d(0, -2000px, 0);
    }
}

.fadeOutUpBig {
    -webkit-animation: fadeOutUpBig 1s infinite forwards;
    animation: fadeOutUpBig 1s infinite forwards;
}

 

动画效果是1秒。所以删除本元素的动作需要等一秒，否则看不到动画效果了。