如何在显示元素时添加幻灯片动画

我想在显示树项时将动画效果添加到以下代码中。我知道，jQuery的幻灯片功能，和CSS有“过渡”，但不知道如何将这些应用到我的代码。有任何想法吗？如何在显示元素时添加幻灯片动画

<head> 
    <script language="JavaScript"> 
     function show(){ 
      var elements = document.getElementsByClassName("label"); 
      for(var i = 0, length = elements.length; i < length; i++) { 
       elements[i].style.display = 'block'; 
      } 
     } 
    </script> 
    <style> 
     .label { 
      -webkit-padding-start: 20px; 
      display: none; 
      } 
    </style> 
</head> 
<body> 
    <div> 
     <div onclick="show()">1st Row</div> 
     <div> 
      <div class="label">First</div> 
      <div class="label">Second</div> 
      <div class="label">Third</div> 
     </div> 
     <div>2nd Row</div> 
    </div> 
</body>

来源

2011-08-25 Deqing

如果您打算使用jQuery，那么您可以使用slideDown和slideUp方法来显示/隐藏动画元素。有可选择地显示/隐藏元素的方法有slideToggle。您可以通过修改show方法如下

工作demo

function show(obj){ 
     var $this = $(obj);//Here obj points to the element clicked 

     //Now you have to show/hide the next sibling of the element clicked 
     //We will use next() method which gives the next sibling of element 
     //And then call slideToggle on it to show/hide alternatively 
     $this.next().slideToggle(); 
    }

在标记

<div onclick="show(this)">1st Row</div>

来源

2011-08-25 05:12:02 ShankarSangoli

谢谢。我如何从无显示这些元素来显示？ – Deqing

看看我最初隐藏了div的演示，如你所愿。 – ShankarSangoli

function show() { 
    $('.label').slideDown(); 
}

此选择具有.label类的所有元素，并将它们滑入视图。还有一个.fadeIn()函数。

此外，您还可以通过附加选择（如ID或类）单击处理程序：

<div> 
    <div class="row">1st Row</div> 
    <div> 
     <div class="label">First</div> 
     <div class="label">Second</div> 
     <div class="label">Third</div> 
    </div> 
    <div class="row">2nd Row</div> 
</div>

通知我删除了onClick=""声明并添加了类行格。然后你可以选择元素要单击事件重视，并保持所有的代码在一个地方：

$('.row').bind('click', function() { 
    $(this).next().find('.label').slideToggle(); 
});

上面这个JavaScript增加了一个click处理与row类的所有元素，并切换所有的显示在下一个元素中与label类的元素。

这是一个jsfiddle：http://jsfiddle.net/L34g3/。

来源

2011-08-25 05:02:22 Jasper

与上面一样@ShankarSangoli问题变化，在此解决方案的分项显示当页面加载时。我可以使初始状态隐藏，就像我的代码中一样？ – Deqing

与ShankarSangoli相同的答案，CSS设置为不显示页面加载的子项，检出我的帖子中的jsfiddle并查看CSS下的右上角。 – Jasper

如何在显示元素时添加幻灯片动画

回答

相关问题