Question

我正致力于以下工作 - 代码：

HTML是从XML文件动态生成的，该文件由XSL文件转换为HTML。由于我的列数不同，我使用JQuery代码中的：nth-child 来通过单击相对复选框隐藏/显示列。

由于我对JQuery不是很了解，我仍然坚持使用动画部分。 我想在隐藏/显示操作中添加动画，例如已选中/未选中的列会显示并从左到右消失。

body {
    font-size: 9pt;
    font-family: arial;
    padding: 0px;
    margin: 0px;
}
.htable {
    border-spacing: 0;
    border-collapse: collapse;
    border: 1px solid black;
    margin: 0 auto 0 auto;
}
.htable tr, th, td {
    border: 1px solid black;
}
.ctable {
    border-spacing: 0;
    border-collapse: collapse;
    border: 1px solid black;
    margin: 0 auto 0 auto;
}

<body>
        <table class="htable">
            <thead>
                <tr>
                    <th>GoPro 1</th>
                    <th>GoPro 2</th>
                    <th>GoPro 3</th>
                    <th>GoPro 4</th>
                </tr>
                <tr>
                    <th>
                        <input checked="checked" type="checkbox">
                    </th>
                    <th>
                        <input checked="checked" type="checkbox">
                    </th>
                    <th>
                        <input checked="checked" type="checkbox">
                    </th>
                    <th>
                        <input checked="checked" type="checkbox">
                    </th>
                </tr>
            </thead>
        </table>
        <table class="ctable">
            <thead>
                <tr>
                    <th></th>
                    <th colspan="1">GoPro 1</th>
                    <th colspan="1">GoPro 2</th>
                    <th colspan="1">GoPro 3</th>
                    <th colspan="1">GoPro 4</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th class="separator">Video resolution</th>
                    <td class="values odd separator">4K</td>
                    <td class="values odd separator">4K</td>
                    <td class="values odd separator">4K</td>
                    <td class="values odd separator">4K</td>
                </tr>
                <tr>
                    <th></th>
                    <td class="values odd">Ultra wide</td>
                    <td class="values odd">Ultra wide</td>
                    <td class="values odd">Ultra wide</td>
                    <td class="values odd">Ultra wide</td>
                </tr>
                <tr>
                    <th></th>
                    <td class="values odd">3840x2160</td>
                    <td class="values odd">3840x2160</td>
                    <td class="values odd">3840x2160</td>
                    <td class="values odd">3840x2160</td>
                </tr>
                </tr>
            </tbody>
        </table>
      <script type="text/javascript">
          $(document).ready(function(){

                /* Show hide columns */
                var f = function() {
                        var index = $(":checkbox").index(this) + 2;
                        $(".ctable > * > * > :nth-child(" + index + ")").toggle(this.checked);
                };

                $(":checkbox").click(f).each(f);
            });
      </script>
</body>

Answer 1

这个怎么样？ http://jsfiddle.net/cdcjy1mg/2/

$(".ctable > * > * > :nth-child(" + index + ")").toggle("slow");

您可以放置所需的动画。看一下jquery效果。

希望得到这个帮助。

Answer 2

您可以尝试这样的事情

DEMO http://jsfiddle.net/cdcjy1mg/7/

 $(".ctable > * > * > :nth-child(" + index + ")").toggleClass('hidden');

<强> CSS

.hidden {
   width: 0;
    opacity: 0;
    font-size: 0;
    padding: 0;
    margin: 0;
    border: 0;
}

.htable tr, th, td {
    border: 1px solid black;
    width: 100px;
    transition: all 0.3s ease-in-out;
    opacity: 1;
    border-collapse: collapse;
    padding: 0;
    margin: 0;

}

使用右/左动画隐藏/显示动态生成的表列

2 个答案: