Question

我想按下按钮触发一波动画，使用.water：hover事件可以成功实现，但不知道如何使用按钮触发，我尝试使用按钮来触发类：焦点事件，但是没有成功......

.water {
        width: 300px;
        height: 300px;
        background-image: url("waves.png");
        margin: 0 0 30px 0;
        -webkit-transition: width 2s ease, height 2s ease;
        -moz-transition: width 2s ease, height 2s ease;
        -o-transition: width 2s ease, height 2s ease;
        -ms-transition: width 2s ease, height 2s ease;
        transition: all 3s ease-out;
    }

.water:hover  {
        width: 500px;
        height: 500px;
                 transition: all 3s ease-out;
    }

更改触发类型

.water {
        width: 300px;
        height: 300px;
        background-image: url("waves.png");
        margin: 0 0 30px 0;
        -webkit-transition: width 2s ease, height 2s ease;
        -moz-transition: width 2s ease, height 2s ease;
        -o-transition: width 2s ease, height 2s ease;
        -ms-transition: width 2s ease, height 2s ease;
        transition: all 3s ease-out;
    }

.water:focus  {
        width: 500px;
        height: 500px;
                 transition: all 3s ease-out;
    }

接近html jQuery中的按钮

  $(function() {            $('#digitButton1').click(function(event) {
                            $('.water').addClass('focus');
                        });
                    });
                    $(document).ready(function() {
                        $('.water').not($(this)).removeClass('focus');
                    });

我该怎么办？谢谢

Answer 1

如果在CSS中定义了转换，它将适用于任何更改。这意味着如果通过Javascript（或JQuery）进行更改，它仍然可以工作，所以我认为添加

.water {
    transition: all 3s ease-out;
    -webkit-transition: all 3s ease-out;
    -moz-transition: all 3s ease-out;
    -ms-transition: all 3s ease-out;
    -o-transition: all 3s ease-out;
}

到你的CSS和

document.addEventListener('DOMContentLoaded', function() {
    document.querySelector('#digitButton1').addEventListener('click', function() {
        document.querySelector('.water').style.width = '500px';
        document.querySelector('.water').style.height = '500px';
    }
}

到你的javascript应该会产生预期的效果。

Answer 2

您可以使用jQuery的触发器功能来触发不同类型的事件。请查看此参考api.jquery.com/trigger /

您可以使用类似

的内容

$('#digitButton1').click(function(event) {
                            $('.box').trigger('focus');
                        });

如何使用按钮触发Javascript转换/转换？

2 个答案: