1

問題：

hiddencss 属性を設定するクラスを持つ HTML 要素がありますdisplay: none;。JS でクラスを削除すると、要素がすぐに表示されます (元のdisplay値が復元されます)。$('.hidden').show(1000)または$('.hidden').fadeIn(1500). _ とチェーンしようとしまし.animate()たが、うまくいきませんでした。

限界

  1. 要素のインライン CSS をいじることはできません (特に を設定することはできませんdisplay: block) 。
  2. jQueryUI removeClass と同様に動作する必要があります: http://jqueryui.com/removeClass/

質問：

HTML 要素のクラスを削除 (変更) するときに変更をアニメーション化する (期間が 0 より大きい) ようにするにはどうすればよいですか?

コード：

CSS:

.hidden{
display: none;
}

HTML

<div class="hidden"> Lorem ipsum </div>

JS

$('.hidden').removeClass('hidden')
4

5 に答える 5

1

http://jsfiddle.net/DU2Wg/1/

HTML と CSS を使用すると、次の JS を使用できます。

$('.hidden')
    .css({ // Change your CSS directly to
          'display':'inline', // the display you want
          'opacity':0 // from opacity 0
    })
    .animate({ // Will change your CSS over time
           opacity:1 // to opacity 1
           },
           2000,  // in 2 secs
           function(){
               $(this).removeClass('hidden'); // will remove your class (only if you want to use it once
               alert($(this).css('display')); // will alert "inline", your current display on that element
           }
    );
于 2013-06-26T12:28:53.340 に答える
0

フェードする必要があるクラスを削除しますが、それは間違いです

この例を試すことができます

HTML

<h1 class="hide" style="display:none; ">Display</h1>

JS

$(function () {
$(".hide").fadeIn('slow');
});
于 2013-06-26T11:34:58.913 に答える
0

なぜ使えないのです$('.hidden').fadeIn(1500)か？

JSFiddle

于 2013-06-26T11:44:35.547 に答える
0

このアニメーションを最新のブラウザーで実行する必要がある場合は、css トランジションを使用してください。

.hidden{
    display: none;
}
.hidden.fadeIn{
    display: block;
    opacity:0;
    visibility:hidden;
    -webkit-transition: all 1s;
    -moz-transition: all 1s;
    -ms-transition: all 1s;
    -o-transition: all 1s;
    transition: all 1s;
}
.hidden.fadeIn.do{
    opacity:1;
    visibility:visible;
}

JS では、次のようにクラスを設定できます。

$('.hidden').addClass('fadeIn');
setTimeout(function(){$('.hidden.fadeIn').addClass('do');},10);

残念ながら、使用する必要がない限り、setTimeout. そうしないと、両方のクラス変更が同時に解釈され、アニメーションは発生しません。

編集

hiddenクラスのルールを変更すると、より少ないコードでできる場合があります。

.hidden{
    display: none;
    opacity:0;
    visibility:hidden;
    -webkit-transition: all 1s;
    -moz-transition: all 1s;
    -ms-transition: all 1s;
    -o-transition: all 1s;
    transition: all 1s;
}
.hidden.fadeIn{
    display: block;
    opacity:1;
    visibility:visible;
}

これで、JS で追加するクラスが 1 つだけになりました。

function fade(){
    $('.hidden').addClass('fadeIn');
}
setTimeout(fade,10);
于 2013-06-26T11:57:57.817 に答える