javascript - 如何动画定位固定 :before selector With jQuery

Question

im 尝试使用 jQuery 为固定在选择器之前的定位设置动画。我们如何调用和动画: 在 jQuery 中的选择器之前，我通过调用类等知道了其他方法。但我只想用 jQuery 完成它。

html

<div id="main"></div>

CSS

#main {
    width:200px;
    height:300px;
    background:#000;
}
#main:before {
    content:'im before';
    position:fixed;
    left:0px;
    top:0px;
    width:40px;
    height:40px;
    background:blue
}

js

$("#main").hover(function () {
    $(this).animate({
        "margin-left": "40px"
    });
    $("#main:before").animate({
        "margin-left": "40px"
    });
}, function () {
    $(this).animate({
        "margin-left": "0px"
    });
    $("#main:before").animate({
        "margin-left": "0px"
    });
});

http://jsfiddle.net/pr6Cg/3/

注意:请给我一些没有插件的解决方案

Answer 1

这对于 javascript 是不可能的，因为你不能选择不存在的元素。

你必须像这样使用css，只需切换一个类

CSS:

div::before {
    content:'';
    position: fixed;
    left:0;
    right:0;
    height:100px;
    background:skyblue;
    transition: all 500ms ease-in-out;
    top:0;
}
div.active::before {
    top: calc( 100% - 100px );
}

jQuery:

$('button').click(function(){
    $('div').addClass('active');
});

Demo

如果你不能这样做，那么我认为你可能需要想出一个不同的想法。