0

我正在测试一个动画，但我想知道持续单击 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/

4

4 回答 4

0

旋转完成后只需删除类........试试这段代码

 $(document).ready(function () {
            $("#card").click(function () {
                $("#card").addClass('spin');
                setTimeout(function () { $('#card').removeClass(); }, 500);
            });
        });
于 2013-10-23T05:06:42.520 回答
0

使用此代码：

$(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');
        }
    });
});
于 2013-10-23T05:07:06.907 回答
0

我认为你必须不要add class使用代替喜欢，divinput image.#

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

演示 1

animate如果你想多次，上面只会一次toggle，然后你可以使用toggleClass()

$(document).ready(function () {
    $("#card").click(function () {
        $(".card").toggleClass('spin');
    });
});

演示 2

于 2013-10-23T04:49:36.980 回答
0

你可以切换类

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

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

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

于 2013-10-23T05:17:39.820 回答