使用动画显示隐藏div

Question

我写了这个脚本，它会打开一个带有正确类名的 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）等，而不仅仅是通过显示选项来展示吗？

- Simulator88

---

请通过格式化您的代码示例来帮助他人帮助您。 - Yoshi

当然可以 :) 去做吧 :) - Simulator88

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

- yogi

Answer 2

您可以使用jQuery的slideDown()和slideUp()方法。

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

- Arun Kasyakar

Answer 3

如果您正在使用Jquery，那么另一种方法是：

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

假设您的一组div中有“hideable”作为className 祝你好运。

- Saju

Answer 4

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

- Alan Wells

Answer 5

这在只用CSS方面要容易得多。

你需要创建一个类。

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

.hidden {
 display:none;
}

使用JavaScript，您可以在需要时应用或删除隐藏类。jQuery动画库远远不够好用。它很笨重，会消耗用户的资源。相反，CSS可以与您的GPU一起工作，从而实现更流畅的动画效果。

- codedude

---

“display” 属性不在动画属性列表中：https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_animated_properties - hsrv

可以根据需求使用opacity或visibility属性，而不是使用display。 - creativecoding

Answer 6

这个肯定会解决你的问题。

如果你在脚本中已经引入了jQuery库，那么你可以直接使用.fadeOut()方法。

- imVJ

---

远程链接可能会停止工作，请修复您的答案。 - Piovezan

Answer 7

你可以使用类似 jQuery 的库来完成这个操作。

当然你也可以使用普通的JavaScript实现，但是使用jQuery库会更加方便。

查看一些 显示 和 隐藏 的示例。

- Felipe Fonseca