投稿日:2017年4月23日クリックするとコンテンツが出る簡単な仕組みをjQueryのfadeInとfadeOutを使って作ってみました。要素をCSSで非表示させるのではなく、jQueryのfadeInとfadeOutで非表示にさせます。none;になるのですが。詳しくはこのページをご覧ください。参考URLjQueryのfadeInとfadeOutとはjQueryのfadeInとfadeOutは演出効果エフェクトです。fadeInは要素をフェードインさせて表示し、fadeOutは要素をフェードアウトさせて非表示にします。フェードインフェードアウトする時の時間を「slow」「normal」「fast」で指定することができますし、数値指定することもできます。サンプルクリックするとコンテンツが出ますクリックするとコンテンツが隠れます「クリックするとコンテンツが出ます」をクリックするとフェードアウトしながら非表示になり、「クリックするとコンテンツが隠れます」がフェードインしながら表示されてこのコンテンツが表示されます。表示された「クリックするとコンテンツが隠れます」をクリックすると、「クリックするとコンテンツが隠れます」とこのコンテンツはフェードアウトしながら非表示になり、最初の「クリックするとコンテンツが出ます」がフェードインしながら表示されます。3500;は変数です。3500が格納されているという事です。3500は数値で今回の使用目的は時間・ミリ秒です。‘none’で非表示が設定されているという事です。jQuery(‘.btn1’).on(‘click’,function(){は.btn1の要素をクリックしたらという事ですが、ここで.on()が登場します。‘none’が適用されて非表示になります。その時にfadeOutしながら、変数jikanhayaに格納されている1500ミリ秒かけて非表示になるという事です。jQuery(‘.btn2’).fadeIn(jikanhaya)は.btn2の要素を.fadeInで表示させるという事です。.conten’).css(kesu);でページが開いた時に非表示になっています。それを7行目jQuery(‘.btn1’).on(‘click’,function(){のクリックで、変数jikanhayaに格納されている1500ミリ秒かけて、フェードインさせながら表示するという事です。jQuery(‘.conten’).fadeIn(jikanoso);は.btn2と同じく.contenをフェードインさせるのですが、その時間をjikanosoで3500ミリ秒と遅くしています。.btn2と.contenでフェートンしてくる時間が違うという設定にしています。.conten’).fadeIn(jikanoso)の1行で良いわけです。jQuery(‘.btn2’).on(‘click’,function(){jQuery(this).css(kesu).fadeOut(jikanhaya)jQuery(‘.btn1’).fadeIn(jikanhaya)jQuery(‘.conten’).css(kesu).fadeOut(“slow”);は今まで解説してきた内容とほとんど同じです。.fadeOut(“slow”)でフェードアウトする時数値を入れなくても「slow」「normal」「fast」で指定できるという事です。.on()とはjQueryで動的に作られた要素に対しても設定したjQueryの司令を実行できる働きがあります。ない要素に対してその要素ができてから適用させることができます。今回のjQueryに必要かと言われれば、新たな要素が作られるわけではないので、jQuery(‘.btn1’).click(function(){でもこちらが希望するように動くので必要ないのですが。class="conten">「クリックするとコンテンツが出ます」をクリックするとフェードアウトしながら非表示になり、「クリックするとコンテンツが隠れます」がフェードインしながら表示されてこのコンテンツが表示されます。表示された「クリックするとコンテンツが隠れます」をクリックすると、「クリックするとコンテンツが隠れます」とこのコンテンツはフェードアウトしながら非表示になり、最初の「クリックするとコンテンツが出ます」がフェードインしながら表示されます。azure;}まとめjQueryのfadeInとfadeOutは要素を出したり隠したりする専用のエフェクトです。ここで紹介した以外にも画像やタブとコンテンツを複数作ってフェートイン・フェードアウトさせたりできます。フェートイン・フェードアウトに限定されているので、使用方法としては限定的かと思います。コメントをキャンセルコメントを投稿するにはログインしてください。