13

このスクリプトを作成しました。このスクリプトは、適切なクラスで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などのアニメーションを作成することはできますか？

4

7 に答える 7

7

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

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ライブラリによって提供されるテクニックは他にもたくさんあります。それも見てください。

于 2013-01-15T10:34:15.857 に答える
3

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

$( document.body ).click(function () {
  if ( $( "div:first" ).is( ":hidden" ) ) {
    $( "div" ).slideDown( "slow" );
  } else {
    $( "div" ).slideUp("slow");
  }
});
于 2017-04-07T07:54:33.770 に答える
2

この例では、同じクラス名を持つ複数の要素を切り替えます。この例ではjqueryは必要ありません。

HTML：

<button onclick="fadeInAndOut(this)" style="width:100%">Toggle 1</button>
<div class="accordianPanel acordianPanelHidden accordianPanelStyle">Panel 1</div>

<button onclick="fadeInAndOut(this)" style="width:100%">Toggle 2</button>
<div class="accordianPanel acordianPanelHidden accordianPanelStyle">Panel 2</div>

Javascript：

function fadeInAndOut(thz) {
  var elmt = thz.nextElementSibling;//Get the element that is below the button that
     //was just clicked

  elmt.classList.toggle("acordianPanelHidden");//Toggle the class which changes
    //attributes which triggers the `transition` CSS
}

CSS

.accordianPanel {
  opacity: 1;
  height:100%;
  transition: all 1s;
}

.accordianPanel.acordianPanelHidden {
  opacity: 0;
  height: 0px;
  visibility:hidden;/* This must be used or some strange things happen - 
   What happens is that even though the content of the panel is not shown 
   any buttons in the content can still be clicked -
   So basically there are invisible buttons that can accidently get clicked -
   if the visibility is not set to hidden - And the visibility doesn't need to be explicitly changed to visible
  from hidden in order to show the content
  because if visibility:hidden is not used then by default the content is 
  displayed -
 */
}

.acordianPanelShown {
  height: 100%;
  width: 100%;
  opacity: 1;
}

.accordianPanelStyle {
  background:red;
}
于 2020-11-05T23:25:38.717 に答える
1

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

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

于 2013-01-15T10:32:30.577 に答える
1

Jqueryを使用している場合、これを行う別の方法は次のとおりです。

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

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

幸運を。

于 2013-01-15T10:46:29.890 に答える
1

これはCSSだけではるかに簡単です。

あなたはクラスを作ります

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

.hidden {
 display:none;
}

また、javascriptを使用すると、必要に応じて非表示のクラスを適用または削除できます。jQueryアニメーションlibは、使用するのに適しているとは言えません。それは不格好であり、あなたのユーザーのために食事を資源化します。CSSは代わりにGPUで動作し、より流動的なアニメーションを可能にします。

于 2015-09-25T19:16:59.167 に答える
-1

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

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

表示と非表示の例をいくつか見る

于 2013-01-15T10:20:13.830 に答える