javascript - 如何动画定位固定：使用jQuery的选择器之前

Question

我正在尝试使用 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');
});

演示

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

Answer 2

正如您一样，您无法使用 JavaScript 访问伪元素，因为它们是由 CSS 动态生成的，并且不存在于 DOM 中。（根据漂流的建议）

尝试这个

#main:before {
    content:'im before';
    position:relative;//use this 
    left:-10px;
    top:-10px;
    width:40px;
    height:40px;
    background:blue
}

Answer 3

这是一个解决方案，但它不是跨浏览器，主要是 Internet Explorer 版本，它使用 CSS 转换并且不需要 jQuery。

#main {
    width:200px;
    height:300px;
    background:#000;
    -webkit-transition: margin-left ease 0.3s;
    transition: margin-left ease 0.3s;
}

#main:before {
    content:'im before';
    position:fixed;
    left:0px;
    top:0px;
    width:40px;
    height:40px;
    background:blue;
    -webkit-transition: margin-left ease 0.3s;
    transition: margin-left ease 0.3s;
}

#main:hover {
    margin-left: 40px;
}

#main:hover:before {
    margin-left: 40px;
}

jsfiddle：http: //jsfiddle.net/pr6Cg/4/