1

Добрый день, подскажите пожалуйста как повторить анимацию кнопки "Купить" как здесь http://autoplastic.com.ua/rezinotehnika/uplotnitelnaja-rezinka-vaz-212121213-lobovogo-okna.html

Пробовал сделать вот так:

$('.button').click(function(){ 
    $(this).addClass('disabled added '); 
    $(this).removeClass('disabled');} 
); 

Но он не срабатывает, так как этим же кликом убирает первый класс. Кроме того,он срабатывает только один раз, то есть при повторном нажатии ничего не меняется.

Спасибо!

4
  • При нажатии на кнопку меняется картинка с "тележки" на "бегающие кружочки" и отсылается ajax-запрос. Когда на него приходит ответ, "кружочки" заменяются на "галочку". Что из этого вызывает затруднения? Сформулируйте вопрос конкретно, добавьте код, который вы уже написали, чтобы мы могли вам помочь. Например, "Вот я сверстал кнопку, вот две картинки, но при нажатии одна не появляется". 6 июл 2015 в 14:47
  • нужен скрипт который при нажатии меняет картинку с "тележки" на "бегающие кружочки" и "галочку", вижу что там при нажатии добавляются 2 класса и один из них через секунду уберается
    – Стас
    6 июл 2015 в 14:57
  • я не силен в скриптах, поэтому прошу помощи, пробовал такой скрипт <script> $('.button').click(function(){ $(this).addClass('disabled added '); $(this).removeClass('disabled');} ); </script> но он не срабатывает, так как этим же кликом убирает первый класс, и он срабатывает только один раз, тоесть при повторном нажатии ничего не меняется
    – Стас
    6 июл 2015 в 14:59
  • 1
    пока идет обмен данными с сервером - поставить одну иконку, когда придет результат - поставить другую. 6 июл 2015 в 17:31

1 ответ 1

2

Вот пример кнопки из вашего примера.

$(function() {
    $(document).on('click', 'button.exclusive', function() {
        var $button = $(this);
        $button.removeClass('added').addClass('disabled').attr('disabled', 'disabled');
        setTimeout(function () {
            $button.removeClass('disabled').addClass('added').removeAttr('disabled');
        }, 1000);
    });
});
@-moz-keyframes spin {
    from { -moz-transform: rotate(0deg); }
    to { -moz-transform: rotate(360deg); }
}
@-webkit-keyframes spin {
    from { -webkit-transform: rotate(0deg); }
    to { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
    from {transform:rotate(0deg);}
    to {transform:rotate(360deg);}
}

button.exclusive
{
  background-color: rgb(221, 221, 221);
  background-image: linear-gradient(rgb(0, 154, 208), rgb(0, 122, 183));
  border: 1px solid rgb(1, 39, 64);
  border-radius: 5px;
  box-sizing: border-box;
  color: #FFF;
  cursor: pointer;
  display: block;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 18px;
  height: 51px;
  line-height: 18px;
  text-align: center;
  text-shadow: 0 1px #015883;
  padding: 0 .5em;
}

button.exclusive:before
{
  font-family: "FontAwesome";
  top: 0;
  left: 0;
  bottom: 0;
  color: white;
  font-size: 25px;
  line-height: 47px;
  text-shadow: 0 1px #015883;
  content: "\f07a";
  z-index: 2;
  width: 25px;
  text-align: center;
  border: none;
  border-radius: 0;
  display: inline-block;
}

button.exclusive:hover
{
      background-image: linear-gradient(#007ab7, #009ad0);
}

button.exclusive.disabled:before
{
  content: "\f110";
  animation: 2s linear 0s normal none infinite spin;
  -webkit-animation: 2s linear 0s normal none infinite spin;
  -moz-animation: 2s linear 0s normal none infinite spin;
}


button.exclusive.added:before
{
  content: "\f00c";
}
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="submit" name="Submit" class="exclusive">
<span>КУПИТЬ!</span>
</button>

1
  • 1
    СПАСИБО ОГРОМНОЕ, ТО ЧТО НУЖНО
    – Стас
    6 июл 2015 в 16:46

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.