Question

我目前有一系列带有翻转动画的容器，可以在悬停时激活。我希望他们不仅可以在悬停时激活，还可以使用单个按钮切换翻转全部按下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/

Answer 1

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

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

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

这样的东西

<button class="toggle-button">Test Button</button>

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

Javascript按钮切换多个css动画

1 个答案: