при изменении класса клика

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/

  • 2
    сделать скрипку поможет нам больше ..
  • 0
    взгляните на api.jquery.com/toggleClass
Показать ещё 2 комментария
Теги:
onclick
transition
toggleclass

4 ответа

0

Просто удалите класс после завершения вращения........ Попробуйте этот кусок кода

 $(document).ready(function () {
            $("#card").click(function () {
                $("#card").addClass('spin');
                setTimeout(function () { $('#card').removeClass(); }, 500);
            });
        });
Поделиться
  • 0
    благодарю вас. Это работает просто отлично!
  • 0
    Отлично :) upvote и пометить как ответ, если это так :)
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');
        }
    });
});
Поделиться
  • 0
    Хорошо. спасибо, но когда я пытаюсь сделать это, каждый второй щелчок заставляет его вращаться очень сильно или по-разному ... я должен сделать положение абсолютным?
  • 0
    Вы можете расположить родительский div абсолютно .
0

Вы можете toggleClass

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

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

Демо: http://jsfiddle.net/w3cXG/

Поделиться
0

Я думаю, вам нужно add class на div не на input image Use . вместо # нравится,

$(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

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню