-
ID:1VHHmk さんの質問

jQueryでhoverした要素のみアニメーションさせたい。

例)画像の上に横から黒の帯が出てくるアニメーション
下記のソースですと:beforeのアニメーションがされない。またこのままだとhoverされた要素以外の:beforeもアニメーションしてしまうことになるのですが、どこを直せばいいか分からないです。
----------------------------------------------------------------
<script>
$(’.post a’).on({
’mouseenter’:function(){
$(this).fadeTo(’fast’,.3);
$(’.post a:before’).animate({
’width’:’480px’,
});
},
’mouseleave’:function(){
$(’.post a:before’).animate({
’width’:’0px’,
});
}
});
</script>
<style>
.post {width:480px;height:480px;}
.post a {display:block;position:relative;}
.post a:before {content:"";display:block;width:0;height:480px;backgroud:#000;}
</style>

<div class="post"><a><img></a></div>
<div class="post"><a><img></a></div>
<div class="post"><a><img></a></div>
<div class="post"><a><img></a></div>
<div class="post"><a><img></a></div>

----------------------------------------------------------------

jquery 1.10.2
Chorome確認

みんなの回答 3 件

ID:Ui1out さんの回答

各処理時の$(’.post a:before’).あたりをthisにすればマウスオーバーしたものだけ反応するかと。

$(this).animate({
’width’:’0px’,
});

ID:1VHHmk

例はサンプルなのですが、ホーバーされた要素$(this)の擬似要素:beforeにアニメーションを入れたいのですが、$(this)ですと.post aにアニメーション効いちゃいますよね。

ID:Ui1out

$(this+":before’)").animate({
’width’:’0px’,
});
とかで、
とにかく今触っているものを基準でセレクタを探さないと。
個別にID振り分けてないかぎりthis使わないと今触っているものを取得できないよ。

でも、
調べてみたら、:beforeや:afterの疑似要素はアニメーションできないみたいだけど。

やりたいことは分かるので、
ライトボックスの背景みたいに、
最初にアニメーション用のブロック要素を作っておいて、
それをマウスオーバーで.postにprependかappendして、アニメーションさせ、マウスアウトで消すとかしたらよいかなぁ。

ID:0uf9TT

>:beforeや:afterの疑似要素はアニメーションできないみたいだけど。
ありがとうございます。それを知りませんでした

ID:vsk59g さんの回答

gifアニメじゃダメか

ID:iKENXR さんの回答

なんか、:before要素をそこで使わなくても良い気がする。
なんか使いたくなっちゃうのはわかるんだけどw

最終更新日:2013-12-22 (4,565 views)

関連するトピックス

ページ上部に戻る