Javascript按钮切换多个css动画

时间:2016-08-14 22:29:31

标签: javascript html css

我目前有一系列带有翻转动画的容器,可以在悬停时激活。我希望他们不仅可以在悬停时激活,还可以使用单个按钮切换翻转全部按下javascript按钮。

HTML:

json_decode($jsondata, true);

对于我使用的对象重复这些对象并依赖于以下CSS:

<div class="flip-container" ontouchstart="this.classList.toggle('hover');">
            <div class="flipper">
                <div class="front">
                    <a href="link1.html">
                        <img src="images/frontimg1.jpg"/>
                    </a>
                </div>
                <div class="back">
                    <div class="fliplinks">
                        <a href="link1.html">
                            <p>text1</p>
                        </a>
                    </div>
                </div>
            </div>
        </div>

编辑:按要求提供jsfiddle:https://jsfiddle.net/futbyyef/

1 个答案:

答案 0 :(得分:0)

假设他们都有.flip-container类,你可以添加这样的函数。

<script>
    $('.toggle-button').click(function(){
        $('.flip-container').toggleClass('hover');
    }
</script>

然后你只需要包含一个按钮来切换它。像

这样的东西
<button class="toggle-button">Test Button</button>

这是一个有效的fiddle。确保在页面上包含jQuery。