Demo

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

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

Answer 2

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

试试这个

#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/

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

3 个答案:

Demo