2

im jQueryでセレクターの前に固定された位置をアニメーション化しようとしています。jQuery で :before セレクターを呼び出してアニメーション化する方法 クラスなどを呼び出すことで他のメソッドを知っています。しかし、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/

注：プラグインなしで解決策を教えてください

4

3 に答える 3

2

存在しない要素を選択できないため、これは 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');
});

デモ

この方法でできない場合は、別のアイデアを考え出す必要があると思います。

于 2013-07-29T05:21:34.837 に答える
1

疑似要素は CSS によってオンザフライで生成され、DOM には存在しないため、JavaScript を使用して疑似要素にアクセスすることはできません。( Adriftの提案による)

これを試して

#main:before {
    content:'im before';
    position:relative;//use this 
    left:-10px;
    top:-10px;
    width:40px;
    height:40px;
    background:blue
}
于 2013-07-29T05:11:06.497 に答える
0

これは解決策ですが、クロスブラウザー (主に 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/

于 2013-07-29T05:15:41.367 に答える