web-dev-qa-db-ja.com

divアニメーションを非表示にする

適切なクラスでdivを開き、他のクラスを閉じるこのスクリプトを作成しました。

function showhide(id) {
    if (document.getElementById) {
        var divid = document.getElementById(id);
        var divs = document.getElementsByClassName("hideable");
        for (var i = 0; i < divs.length; i = i + 1) {
            divs[i].style.display = "none";
        }
        divid.style.display = "block";
    }
    return false;
}

表示オプションで表示するだけでなく、fadout、easeoutなどのアニメーションを作成することはできますか？

javascriptanimationhtmlshow-hide
8
user1632298

あなたはこれを試すことができます

function showhide(id) {
  if (document.getElementById) {
    var divid = document.getElementById(id);
    var divs = document.getElementsByClassName("hideable");
    for (var i = 0; i < divs.length; i = i + 1) {
      $(divs[i]).fadeOut("slow");
    }
    $(divid).fadeIn("slow");
  }
  return false;
}

このフィドルをご覧ください " http://jsfiddle.net/9jtd3/ "

Jqueryライブラリーが提供するテクニックは他にもたくさんあります。それもご覧ください。

8
yogi

Jqueryを使用している場合、これを行う別の方法は

function showhide(id) {
  $(".hideable".fadeOut("slow");
  $("#" + id).fadeIn("slow");
}

DivのグループのclassNameとして「非表示」を想定

幸運を。

1
Saju

これ はあなたの問題を確実に解決します。

スクリプトにjQueryライブラリが含まれている場合は、.fadeOut（）を直接使用できます。

1
imVJ

JQueryのslideDown() and slidUp()を使用できます

$( document.body ).click(function () {
  if ( $( "div:first" ).is( ":hidden" ) ) {
    $( "div" ).slideDown( "slow" );
  } else {
    $( "div" ).slideUp("slow");
  }
});
1
Arun Kasyakar

jQuery などのライブラリを使用してそれを行うことができます。

プレーンなJavaScriptを使用して確実に作成できますが、jQueryは素晴らしいライブラリであるため、それを行う意味はありません。

show および hide の例をいくつか参照してください

0
Felipe Fonseca

これは、CSSのみを使用する方がはるかに簡単です。

クラスを作る

div {
 display:block;
 transition: all .2s ease-out;
}

.hidden {
 display:none;
}

また、JavaScriptを使用すると、必要なときに非表示のクラスを適用または削除できます。 jQueryアニメーションlibは、使用するのに適していません。それは不格好で、ユーザーの食事をリソーシングします。代わりにCSSがGPUと連携して、より滑らかなアニメーションを実現します。

0
codedude