1

私はしばらくプログラミングから離れていて、これについて頭を悩ませることはできません。

私は2つのクラスを持つ1つのdivを持っています。ホバー時に、CSSで簡単にできるbg画像を切り替えたいと思います。

でもフェード効果が欲しいのですが。toggleClassこれはjQueryUIで使用するのと同じくらい簡単ですが、目的の効果は得られません。

$(".clicker").hover( function() {
    $(this).parent().toggleClass("anim", 500);
});​

2つのクラス間でフェード効果を得るにはどうすればよいですか？

ここに実例があります。

ありがとう ：）

4

3 に答える 3

1

jsBin デモ

2 つの DIV を使用し、内側の DIV の可視性を切り替えます ( #lighter_2)

<div id="lighter">     
    <div id="lighter_2"></div>     
    <p class="clicker">Darkspore</p>
</div>

CSS:

#lighter{
    position:relative;
    background: url(http://placehold.it/250x250/f0f);
    width: 100%;
    height: 400px;
}

#lighter_2{
    display:none;
    position:absolute;
    background: url(http://placehold.it/250x250/cf5);
    width: 100%;
    height: 400px;
}

.clicker{
    position:relative;
    z-index:2;
    background: #fff;
    cursor:pointer;
}

そして、そのdivをオンにするだけですhover

$('.clicker').hover(function(){
  $('#lighter_2').stop().fadeTo(800,1);
},function(){
  $('#lighter_2').stop().fadeTo(800,0);
});
于 2012-06-15T18:56:12.890 に答える
1

しかし、jQuery UI でトグルのアニメーションを作成することは可能background-imageですか?

シンプルなフェード効果を使用することをお勧めします。

$(".clicker").hover(function() {
    $(this).parent().fadeOut(500, function() {
        $(this).toggleClass("anim").fadeIn(500);
    });
});​

デモ: http://jsfiddle.net/VfqLA/2/

于 2012-06-15T18:30:23.470 に答える
0

.fadeIn() と .fadeOut() を使用します。http://api.jquery.com/fadeOut/を参照してください。

注意 古いものを fadeOut() し、次の呼び出しで fadeIn() 新しいものを呼び出すことができます。

于 2012-06-15T18:28:52.147 に答える