JQuery on Clicks添加了类

时间：2017-04-01 00:16:24

标签： javascript jquery html css

Hello people 我创建了一个简单的汽车动画但是有很多问题，当用户同时点击多个按钮时，视频中会出现此问题所以如何防止这个问题，原因是我们无法预测用户会做什么


Youtube Video


这里是我的代码： 

$(document).ready(function () {
    var $cars = $('.car');
    var temp = 1;
    $('.car-model').on('click', function () {
        /*=========================
         * Add Class Active
         */
        $(this).addClass('activeModel').parent().siblings().find('.car-model').removeClass('activeModel');
        var index = $(this).data('index');
        if (temp == index) {

        } else {
            var $current = $cars.find('.current');
            var $next = $('[data-car-index="' + index + '"]').parent();
            $current.addClass('car--trans-out');
            setTimeout(function () {
                $('.car-image-container').removeClass('whelrotateClick');
                $current.removeClass('current').removeClass('car--trans-out');
                $next.addClass('current').addClass('car--trans-in');
                setTimeout(function () {
                    $next.removeClass('car--trans-in');
                }, 1000)
            }, 1000);
        }
        temp = index;
    });
    $('.selectContainer').on('change', function () {
        var index = $(this).find('option:selected').data('index');
        var $current = $cars.find('.current');
        var $next = $('[data-car-index="' + index + '"]').parent();

        $current.addClass('car--trans-out');
        setTimeout(function () {
            $current.removeClass('current').removeClass('car--trans-out');
            $next.addClass('current').addClass('car--trans-in');
            setTimeout(function () {
                $next.removeClass('car--trans-in');
            }, 1000)
        }, 1000);
    });

});
.car{
    padding:40px 0;
}
.car .changeCarSelect{
    display:none;
    text-align:left;
}
.car .changeCarSelect span{
    display:inline-block;
    margin-right:4px;
    font-size:14px;
}
.car .selectContainer {
    width: 200px;
    padding: 10px 5px;
    display:inline-block;
    margin-bottom:30px;
    font-size: 14px;
    border:1px solid rgba(246, 246, 246, 0.89);
    outline:none;
    cursor:pointer;
}
.car .car-button .car-model{
    width:100%;
    margin-bottom:30px;
    cursor:pointer;
}
.car .car-button .car-model h3 {
    margin: 0;
    padding: 15px 10px;
    border: 2px solid #e9e9e9;
    color: #333;
    font-family: "Raleway", Arial, Tahoma;
    font-weight: 700;
    font-size: 18px;
    text-align: center;
    -moz-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    -webkit-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
}
.car .car-button .car-model.activeModel h3{
    background-color:#333;
    color:#ffffff;
}
.car div[class^='col']{
    padding:4px;
}
.car .car-relative{
    position:relative;
    width:100%;
    margin: 0 0 20px;
    overflow: hidden;
}
.car-image-container{
    position: absolute;
    left: 100%;
    overflow: hidden;
}

.car .car-image{
    display: none;
}
.car .car-image img{
    margin:auto;
}
.car .current{
    position: relative;
    left: 0;
}
.car .current .car-image{
    display: block;
}
.car--trans-in .car-image {
    -moz-animation: trans-in 1s ease-out;
    -o-animation: trans-in 1s ease-out;
    -webkit-animation: trans-in 1s ease-out;
    animation: trans-in 1s ease-out;
    -moz-animation-fill-mode: forwards;
    -o-animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -moz-animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
    -o-animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
    -webkit-animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
    animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
}
.car--trans-out .car-image {
    -moz-animation: trans-out 1s ease-in;
    -o-animation: trans-out 1s ease-in;
    -webkit-animation: trans-out 1s ease-in;
    animation: trans-out 1s ease-in;
    -moz-animation-fill-mode: forwards;
    -o-animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -moz-animation-timing-function: cubic-bezier(0.895, 0.03, 0.685, 0.22);
    -o-animation-timing-function: cubic-bezier(0.895, 0.03, 0.685, 0.22);
    -webkit-animation-timing-function: cubic-bezier(0.895, 0.03, 0.685, 0.22);
    animation-timing-function: cubic-bezier(0.895, 0.03, 0.685, 0.22);
}
@-moz-keyframes trans-in {
    0% {
        -moz-transform: translateX(150%);
        -ms-transform: translateX(150%);
        -o-transform: translateX(150%);
        -webkit-transform: translateX(150%);
        transform: translateX(150%);
    }
    80% {
        -moz-transform: translateX(0%);
        -ms-transform: translateX(0%);
        -o-transform: translateX(0%);
        -webkit-transform: translateX(0%);
        transform: translateX(0%);
    }
    100% {
        -moz-transform: translateX(0%);
        -ms-transform: translateX(0%);
        -o-transform: translateX(0%);
        -webkit-transform: translateX(0%);
        transform: translateX(0%);
    }
}

@-webkit-keyframes trans-in {
    0% {
        -moz-transform: translateX(150%);
        -ms-transform: translateX(150%);
        -o-transform: translateX(150%);
        -webkit-transform: translateX(150%);
        transform: translateX(150%);
    }
    80% {
        -moz-transform: translateX(0%);
        -ms-transform: translateX(0%);
        -o-transform: translateX(0%);
        -webkit-transform: translateX(0%);
        transform: translateX(0%);
    }
    100% {
        -moz-transform: translateX(0%);
        -ms-transform: translateX(0%);
        -o-transform: translateX(0%);
        -webkit-transform: translateX(0%);
        transform: translateX(0%);
    }
}

@keyframes trans-in {
    0% {
        -moz-transform: translateX(150%);
        -ms-transform: translateX(150%);
        -o-transform: translateX(150%);
        -webkit-transform: translateX(150%);
        transform: translateX(150%);
    }
    80% {
        -moz-transform: translateX(0%);
        -ms-transform: translateX(0%);
        -o-transform: translateX(0%);
        -webkit-transform: translateX(0%);
        transform: translateX(0%);
    }
    100% {
        -moz-transform: translateX(0%);
        -ms-transform: translateX(0%);
        -o-transform: translateX(0%);
        -webkit-transform: translateX(0%);
        transform: translateX(0%);
    }
}
@-moz-keyframes trans-out {
    0% {
        -moz-transform: translateX(0%);
        -ms-transform: translateX(0%);
        -o-transform: translateX(0%);
        -webkit-transform: translateX(0%);
        transform: translateX(0%);
    }
    10% {
        -moz-transform: translateX(0%);
        -ms-transform: translateX(0%);
        -o-transform: translateX(0%);
        -webkit-transform: translateX(0%);
        transform: translateX(0%);
    }
    80% {
        -moz-transform: translateX(-100%);
        -ms-transform: translateX(-100%);
        -o-transform: translateX(-100%);
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%);
    }
    100% {
        -moz-transform: translateX(-100%);
        -ms-transform: translateX(-100%);
        -o-transform: translateX(-100%);
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%);
    }
}
@-webkit-keyframes trans-out {
    0% {
        -moz-transform: translateX(0%);
        -ms-transform: translateX(0%);
        -o-transform: translateX(0%);
        -webkit-transform: translateX(0%);
        transform: translateX(0%);
    }
    10% {
        -moz-transform: translateX(0%);
        -ms-transform: translateX(0%);
        -o-transform: translateX(0%);
        -webkit-transform: translateX(0%);
        transform: translateX(0%);
    }
    80% {
        -moz-transform: translateX(-100%);
        -ms-transform: translateX(-100%);
        -o-transform: translateX(-100%);
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%);
    }
    100% {
        -moz-transform: translateX(-100%);
        -ms-transform: translateX(-100%);
        -o-transform: translateX(-100%);
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%);
    }
}
@keyframes trans-out {
    0% {
        -moz-transform: translateX(0%);
        -ms-transform: translateX(0%);
        -o-transform: translateX(0%);
        -webkit-transform: translateX(0%);
        transform: translateX(0%);
    }
    10% {
        -moz-transform: translateX(0%);
        -ms-transform: translateX(0%);
        -o-transform: translateX(0%);
        -webkit-transform: translateX(0%);
        transform: translateX(0%);
    }
    80% {
        -moz-transform: translateX(-100%);
        -ms-transform: translateX(-100%);
        -o-transform: translateX(-100%);
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%);
    }
    100% {
        -moz-transform: translateX(-100%);
        -ms-transform: translateX(-100%);
        -o-transform: translateX(-100%);
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%);
    }
}
@media only screen and (max-width: 768px)  {
    .car .changeCarSelect{
        display:block;
    }
    .car .car-button .car-model {
        display:none;
    }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="car">
        <div class="container">
            <div class="changeCarSelect">
                <span>Change Car</span>
                <select class="selectContainer">
                    <option class="selectCar" data-index="1">
                        Car model
                    </option>
                    <option class="selectCar" data-index="2">
                        Car model
                    </option>
                    <option class="selectCar" data-index="3">
                        Car model
                    </option>
                    <option class="selectCar" data-index="4">
                        Car model
                    </option>
                    <option class="selectCar" data-index="5">
                        Car model
                    </option>
                </select>

            </div>
            <div class="car-button">
                <div class="row">
                    <div class="col-md-8 col-md-offset-2">
                        <div class="row">
                            <div class="col-md-2 col-sm-3 col-xs-6">
                                <div class="car-model activeModel" data-index="1">
                                    <h3>Car Model 1</h3>
                                </div>
                            </div>
                            <div class="col-md-2 col-sm-3 col-xs-6">
                                <div class="car-model" data-index="2">
                                    <h3>Car Model 2</h3>
                                </div>
                            </div>
                            <div class="col-md-2 col-sm-3 col-xs-6">
                                <div class="car-model" data-index="3">
                                    <h3>Car Model 3</h3>
                                </div>
                            </div>
                            <div class="col-md-2 col-sm-3 col-xs-6">
                                <div class="car-model" data-index="4">
                                    <h3>Car Model 4</h3>
                                </div>
                                 </div>
                            <div class="col-md-2 col-sm-3 col-xs-6">
                                <div class="car-model" data-index="5">
                                    <h3>Car Model 5</h3>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-lg-12">
                    <div class="car-relative">
                        <div class="car-image-container current">
                            <div class="car-image" data-car-index="1">
                                <img class="img-responsive" src="http://store6.up-00.com/2017-03/149089668025111.png" alt="" />
                            </div>
                        </div>
                        <div class="car-image-container">
                            <div class="car-image" data-car-index="2">                                
                                <img class="img-responsive" src="http://store6.up-00.com/2017-03/149089668036292.png" alt="" />
                            </div>
                        </div>
                        <div class="car-image-container">
                            <div class="car-image" data-car-index="3">
                                <img class="img-responsive" src="http://store6.up-00.com/2017-03/149089668053093.png" alt="" />
                            </div>
                        </div>
                        <div class="car-image-container">
                            <div class="car-image" data-car-index="4">                                
                                <img class="img-responsive" src="http://store6.up-00.com/2017-03/149089668064654.png" alt="" />
                            </div>
                        </div>
                        <div class="car-image-container">
                            <div class="car-image" data-car-index="5">                                
                                <img class="img-responsive" src="http://store6.up-00.com/2017-03/149089668081245.png" alt="" />
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>

请全屏运行代码段

1 个答案:

答案 0 :(得分：2)

如果您使用CSS3制作动画，则可以使用以下方式检查过渡：

// if you use CSS3 transition
$("selector").on("transitionend", function(){
   // do something ... like make buttons clickable again...
});

或者如果您使用CSS3 动画 

$("selector").on("animationend", function(){
   // do something
});

示例

这里有一个关于如何使用.one()和.off() jQuery方法的示例：

  

如您所见，当汽车动画

时，该按钮无法点击

＆＃13;
＆＃13; 
var $btn = $(".btn");
var $car = $(".car");

function initStates() {
  // Make button clickable
  $btn.one("click", moveCar);
  // Remove the animation class
  $car.removeClass("moveCar");
}

function moveCar() {
  console.log("BUTTON CLICK!!");

  // Remove Click handler
  $btn.off("click");

  // Move car using CSS3 animation
  // and call initStates on animationend (event callback)
  $car.addClass("moveCar").one("animationend", initStates);
}

// INITIALIZE default states
initStates();
＆＃13; 
.car {
  position: relative;
  background: red;
  width: 20px;
  height: 20px;
}

.moveCar /* CLASS ADDED BY JQUERY */ {
  animation: move 2s ease-out;
  background: green;
}

@keyframes move {
  0% {
    left: 0;
  }
  100% {
    left: 80%;
  }
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button class="btn">CLICK TO MOVE CAR</button>
<div class="car"></div>
＆＃13;
＆＃13;
＆＃13;

如果您使用jQuery＆＃39; .animate()，则可以使用

检查项目是否已设置动画 
if( $("selector").is(":animated") ) return;
// If a selector is animated the code below will not execute
alert("Animate next car!");
最后，为了记住单个按钮，当一辆汽车被动画化时 - 你可以创建一个变量来存储汽车的值，以便在当前的动画触发.animate回调时将其设置为动画。记得在你使用它之后重置/归零变量。

如果相反 - 您希望实际上在屏幕上运行多辆汽车 - 而不是您需要使用

定位汽车 
position: absolute;
相关问题
最新问题