1

さて、私は単純に不透明度を 0 から 1 にフェードさせ、クリックすると 1 から 0 にフェードさせようとしています。私はif文を書く必要があると仮定しています。これが今のコードです。

$(document).ready(function() {
     $('#soilink').click(function() {$('#soi').animate({opacity:1}, 400 );}

    );

だから今、私のウェブサイトのリンクをクリックすると、#soi という div エリアがフェードインします。その部分はよくわかりました。

編集

これを切り替えたいのですが、トグル機能を使用すると、div が html から完全になくなり、他の div がずれてしまいます。

4

3 に答える 3

1

そのためのfadeTo()関数があります

$('#soilink').click(function() {
   $('#soi').fadeTo(400, 1);
});

トグル効果を作成しようとしている場合は、fadeToggle()関数もあります。

$('#soilink').click(function() {
   $('#soi').fadeToggle(400);
});

アップデート：

これを行う方法は次のとおりです。

$('#soilink').click(function() {
   $('#soi').stop().fadeTo(400, $('#soi').css('opacity') == 0 ? 1 : 0); 
});
于 2013-03-11T01:58:01.530 に答える
0 
$('#soilink').click(function() {
   $('#soi').fadeToggle();
});

以下は、必要になった場合にカスタム トグルを作成する方法の例です。

var values=['v1', 'v2'],
    c=0;  // Set to "1" if you have your element initially hidden (display:none;)
$('#element').click(function() {
   console.log( values[c++%2]) ); // v2 // v1 // v2 // v1 // v2 .....
});

CUSTOM EXAMPLE - LIVE DEMO

于 2013-03-11T02:01:03.710 に答える
0

#soi目的の完全な不透明度を持つ可視クラスを作成します。次に、リンクをクリックして切り替えます。

$('#soilink').click(function() {
    $('#soi').toggleClass('visible', 400);
});

JSFiddle

これにはjQuery UIが必要であることに注意してください。

于 2013-03-11T02:04:39.617 に答える