Question

我想在显示树项目时为下面的代码添加动画效果。

我知道jquery有滑动功能，而css有＆＃34;转换＆＃34;但不知道如何将这些应用到我的代码中。有什么想法吗？

<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>

Answer 1

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=""语句并在行div中添加了一个类。然后，您可以选择要附加click事件的元素，并将所有代码保存在一个位置：

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

上面的JavaScript为所有带有row类的元素添加了一个点击处理程序，并在下一个元素中切换了label类的所有元素的显示。

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

Answer 2

如果您打算使用jQuery，则可以使用slideDown和slideUp方法显示/隐藏带动画的元素。有slideToggle方法可以选择性地显示/隐藏带有animcation的元素。您可以修改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>

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

2 个答案: