Javascript 如何设置固定位置的动画：使用jQuery在选择器之前

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

html

js

---

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

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

试试这个

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

---

这是一个解决方案，但它不是跨浏览器的，主要是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;
}

---

jsfdle:

这在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 );
}

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

jQuery:

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 );
}

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

---

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

我在问题中已经提到，我正在尝试制作定位固定元素的动画。我知道，但请阅读我的问题，我想用jQueryHmm来做，我想那时做不到，如果您担心css转换的回调，您仍然可以使用jQuery来实现它。。。。。。。。。。。。。。。当我将鼠标悬停在“选择器”上时：在其父div设置动画之前，为什么？

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