Question

我正在测试动画，但我想知道连续点击div或输入并继续执行动画的最佳方法。每次点击图像时如何进行转换以保持重复？这是我的代码：

<!DOCTYPE html>
<html>
    <head>
        <style>
            body {
                background-color: #505050;
            }
            .card {
                position: relative;
                float: left;
                width: 10%;
                margin-left: 5%;
                margin-right: 5%;
            }
            .spin {
                transform: rotateY(360deg);
                -moz-transform: rotateY(360deg);
                -ms-transform: rotateY(360deg);
                -o-transform: rotateY(360deg);
                -webkit-transform: rotateY(360deg);
                transition-property: all;
                transition-duration: .5s;
                transition-timing-function: linear;
                -moz-transition-property: all;
                -moz-transition-duration: .5s;
                -moz-transition-timing-function: linear;
                -webkit-transition-property: all;
                -webkit-transition-duration: .5s;
                -webkit-transition-timing-function: linear;
                -o-transition-property: all;
                -o-transition-duration: .5s;
                -o-transition-timing-function: linear;
                -ms-transition-property: all;
                -ms-transition-duration: .5s;
                -ms-transition-timing-function: linear;
            }

.rotate {
                    transform: rotateX(360deg);
                    -moz-transform: rotateX(360deg);
                    -ms-transform: rotateX(360deg);
                    -o-transform: rotateX(360deg);
                    -webkit-transform: rotateX(360deg);
                    transition-property: all;
                    transition-duration: .5s;
                    transition-timing-function: linear;
                    -moz-transition-property: all;
                    -moz-transition-duration: .5s;
                    -moz-transition-timing-function: linear;
                    -webkit-transition-property: all;
                     -webkit-transition-duration: .5s;
                    -webkit-transition-timing-function: linear;
                    -o-transition-property: all;
                    -o-transition-duration: .5s;
                     -o-transition-timing-function: linear;
                    -ms-transition-property: all;
                    -ms-transition-duration: .5s;
                    -ms-transition-timing-function: linear;
                }
        </style>
    </head>
    <body>
        <div class="card">
            <input type="image" id="card" src="images2/Card.jpg" value="1">
        </div>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
        <script>
            $(document).ready(function() {
                $("#card").click(function() {
                    $("#card").addClass('spin');
CheckValue($(this).val());
                });
function CheckValue(value)
        {
      selectedImageValue = value;  

 if(selectedImageValue == 1)
                {

$(#card).addClass('rotate');

        }
        }

            });
        </script>
    </body>
</html>

有人可以解释正确的方法。谢谢。我编辑了我的问题。我想添加第二个类，但每次单击时仍然会生成图像动画。我该怎么做呢。

好的我做了一个小提琴的例子。问题是你只能翻转一次卡片，我希望能够多次翻转卡片。我知道我错误地解决了我的课程，但我不明白如何为每次点击重置课程或动画。你能否修改else语句中的代码，使其在每次点击时都有动画效果。这是小提琴链接： http://jsfiddle.net/EJzJA/4/

Answer 1

我认为您必须add class div而非input image使用.代替#，

$(document).ready(function () {
    $("#card").click(function () {
        $(".card").addClass('spin');
     // ---^ use . in place of #
    });
});

<强> Demo 1

如果您想animate多次，toggle上面只会$(document).ready(function () { $("#card").click(function () { $(".card").toggleClass('spin'); }); });，那么您可以使用toggleClass()

{{1}}

<强> Demo 2

Answer 2

旋转完成后简单删除课程........ 试试这段代码

 $(document).ready(function () {
            $("#card").click(function () {
                $("#card").addClass('spin');
                setTimeout(function () { $('#card').removeClass(); }, 500);
            });
        });

Answer 3

使用此代码：

$(document).ready(function(){
    $("#card").click(function(){
        if($(this).hasClass('spin')){
            $(this).parent().addClass('spin');
            $(this).removeClass('spin');
        }
        else{
            $(this).parent().removeClass('spin');
            $(this).addClass('spin');
        }
    });
});

Answer 4

你可以toggleClass

<script>
        $(document).ready(function() {

            $("#card").on('click',function() {
                $("#card").toggleClass('spin');
            });
        });
</script>

演示：http://jsfiddle.net/w3cXG/

点击更改课程

4 个答案: