How to animate Positioned fixed :before selector With jQuery

Question

im Trying to animate positioned fixed before selector with jQuery. how can we call and animate :before selector in jQuery i know other method by calling class etc.. But i only want to be done it with 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/

Note: please give me some solution without any plugin

**jQuery to the rescue**............... *NOT* – iConnor Jul 29 '13 at 05:26 — iConnor, Jul 29 '13 at 05:26

score 2 · Answer 1 · answered Jul 29 '13 at 05:21

This is not possible with javascript because you cannot select elements that don't exist.

You have to use css like so, just toggle a class

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

If you can't do it this way, then i think you may have to come up with a different idea.

when i hover on :before selector its parent div animates why? — Hushme, Jul 29 '13 at 05:30

score 1 · Answer 2 · edited May 23 '17 at 12:20

1

As you You can't access pseudo-elements using JavaScript as they are generated on the fly by CSS and don't exist in the DOM. (as Suggested BY Adrift)

try this

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

edited May 23 '17 at 12:20

Community

1
1

answered Jul 29 '13 at 05:11

Tushar Gupta - curioustushar

58,085
24
103
107

i already mentioned in my question that i m trying to animate positioned fixed element – Hushme Jul 29 '13 at 05:11

score 0 · Answer 3 · edited Jul 29 '13 at 05:46

0

This is a solution but its not cross-browsers, mainly the Internet Explorer versions, it uses CSS transitions and does not require 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/

edited Jul 29 '13 at 05:46

Tushar Gupta - curioustushar

58,085
24
103
107

answered Jul 29 '13 at 05:15

jerrylow

2,569
1
15
25

i knew that but please read my question i want to be done it with jQuery – Hushme Jul 29 '13 at 05:16
Hmm, I don't think it can be done then, if you are concern about callbacks with css transitions you can still achieve it with jQuery http://stackoverflow.com/questions/9255279/callback-when-css3-transition-finishes – jerrylow Jul 29 '13 at 05:24

How to animate Positioned fixed :before selector With jQuery

3 Answers3

Demo