JQuery on Clicks add class

Question

Hello people I've created a simple cars animations but there are many problems that when the user clicks on the more than button in the same time, this problem in the video will appears so How to prevent this problem, The reason is that we will not be able to predict what the user will do

Youtube Video

Here my code:

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

Please run code snippet in fullscreen

Answer 1

If you animate using CSS3 than you can check for a transition is finished using:

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

or if you use CSS3 animation

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

EXAMPLE

here's an example on how to use .one() and .off() jQuery's methods:

as you can see, the button is not clickable while the car animates

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();

.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%;
  }
}

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

If you use jQuery's .animate() than you can check if an item is animated using

if( $("selector").is(":animated") ) return;
// If a selector is animated the code below will not execute
alert("Animate next car!");

than, eventually, in order to memorize the clicked button while one car was animated - you could create a variable to store the value of the car to animate next once the current animated one triggers an .animate callback - Than remember to reset / null the variable after you've used it.

If instead - you want actually to have multiple cars running on screen - than you need to position your cars using

position: absolute;