0

我尝试了以下代码段，但尽管徽标显示了，但转换不起作用。
网络浏览器是 chrome 29。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <script src="lib/jquery-2.0.3.min.js"></script>
    <style type="text/css">
        #logo {
            display: none;
            height: 46px;
            width: 46px;
            background-image: url("https://lh4.googleusercontent.com/-v0soe-ievYE/AAAAAAAAAAI/AAAAAAABSw4/mVgTJbt4qek/s46-c-k-no/photo.jpg");
            background-size: contain;
            background-repeat: no-repeat;
            transition-duration: 1s;
            transition-timing-function: ease-out;
        }
        .logo_animation {
            -webkit-transform: scale(3);
        }
    </style>
    <script>
        $(function () {
            $('#trigger').on('click', function () {
                $('#logo').show();
                $('#logo').toggleClass('logo_animation');
            })
        });
    </script>
    <title>Question Demo</title>
</head>
<body>
    <div id="logo"></div>
    <input type="button" id="trigger" value="Execute" />
</body>
</html>
4

1 回答 1

0

@Passerby 在评论中告诉我解决方案。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <script src="lib/jquery-2.0.3.min.js"></script>
    <style type="text/css">
        #logo {
            display: none;
            height: 46px;
            width: 46px;
            background-image: url("https://lh4.googleusercontent.com/-v0soe-ievYE/AAAAAAAAAAI/AAAAAAABSw4/mVgTJbt4qek/s46-c-k-no/photo.jpg");
            background-size: contain;
            background-repeat: no-repeat;
            transition-duration: 2s;
            transition-timing-function: ease-out;
        }
        .logo_animation {
            -webkit-transform: scale(3);
        }
    </style>
    <script>
        $(function () {
            $("#trigger").on("click", function () {
                $("#logo").show();
                window.setTimeout(function () {
                    $("#logo").toggleClass("logo_animation");
                }, 0);
            });
        });
    </script>
    <title>Question Demo</title>
</head>
<body>
    <div id="logo"></div>
    <input type="button" id="trigger" value="Execute" />
</body>
</html>
于 2013-09-23T11:24:06.953 回答