Как заставить работать анимацию jquery .addclass?

Question

[Denis Kunitsyn]

Привет всем! Народ подскажите пожалуйста у меня есть 3 элемента
html:
div class="botton"
div class="botton2"
div class="block"
css:
.block {left:0; transition: all 2000ms cubic-bezier(.83,.13,.09,.99)}
.block_after {left:30%; transition: all 2000ms cubic-bezier(.83,.13,.09,.99)}
js:
$(function() {
$(".botton").click(function() {
$( ".block" ).removeClass( "block" ).addClass( "block_after" ); // тут все работает, блок смещается плавно
});
});
Теперь я хочу нажимая на botton2 сместить блок обратно
$(function() {
$(".botton2").click(function() {
$( ".block" ).removeClass( "block_after" ).addClass( "block" ); // и тут ничего не работает
});
});
Помогите я не особый знаток js : ) как сделать !?

Answer 1

[Sagrana]

В этой строке вы удаляете класс block:

$( ".block" ).removeClass( "block" ).addClass( "block_after" ); // тут все работает, блок смещается плавно

А в этой пытаетесь обратится по удаленному классу:

$( ".block" ).removeClass( "block_after" ).addClass( "block" ); // и тут ничего не работает

Для обратного смещения в вашем случае надо

$( ".block_after" ).removeClass( "block_after" ).addClass( "block" );

Comments

[Denis Kunitsyn]

О Господи какой же я олень ) большое спасибо, все верно!!!

[Сергей delphinpro]

Всё верно. Только зачем постоянно выбирать блок? Конечно в данном случае неважно, но лучше сделать

$(function() { 
  var $block = $( ".block" );
  $(".botton").click(function() { 
    $block.removeClass( "block" ).addClass( "block_after" ); 
  }); 
  $(".botton2").click(function() { 
    $block.removeClass( "block_after" ).addClass( "block" ); 
  }); 
});