如何在顯示元素時添加幻燈片動畫

我想在顯示樹項時將動畫效果添加到以下代碼中。我知道，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

如何在顯示元素時添加幻燈片動畫

回答

相關問題