显示带有动画的隐藏 div答案

【问题标题】：Show hide div with animation显示带有动画的隐藏 div
【发布时间】：2013-01-15 10:17:54
【问题描述】：

我制作了这个脚本，它用正确的类打开一个 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;
}

是否可以制作一些动画，如淡出、缓出，而不是仅通过显示选项显示？

【问题讨论】：

请帮助其他人帮助您，通过格式化您的代码示例。
当然 :) 做人 :)

标签： javascript animation html show-hide

【解决方案1】：

你可以试试这个

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 库提供了更多的技术，你也应该看看。

【讨论】：

【解决方案2】：

你可以使用jQuery的slideDown() and slidUp()

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

【讨论】：

【解决方案3】：

此示例将切换具有相同类名的多个元素。这个例子不需要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;
}

【讨论】：

【解决方案4】：

This一定能解决你的问题。

如果您在脚本中包含了 jQuery 库，则可以直接使用 .fadeOut()。

【讨论】：

远程链接可能会停止工作。请修正你的答案。

【解决方案5】：

仅使用 CSS 会更容易。

你上课

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

.hidden {
 display:none;
}

而使用 javascript，您可以根据需要应用或删除隐藏的类。 jQuery 动画库远非好用。它很笨重，并且为您的用户消耗资源。 CSS 可与您的 GPU 配合使用，从而实现更流畅的动画。

【讨论】：

display 属性不在动画属性列表中：developer.mozilla.org/en-US/docs/Web/CSS/…
可以使用属性opacity 或visibility 代替display，具体取决于要求。

【解决方案6】：

如果您使用的是 Jquery，那么另一种方法是

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

假设您的 div 组中的 className 为“可隐藏”

祝你好运。

【讨论】：

【解决方案7】：

您可以使用 jQuery 之类的库来做到这一点。

你当然可以使用纯 javascript 来实现它，但这样做没有意义，因为 jQuery 是一个了不起的库。

查看show 和hide 的一些示例

【讨论】：