Как я могу переключить анимацию div?

Question

Я попытался установить JQuery UI, чтобы я мог легко добавлять анимацию в funciton toggleClass, но он только анимирует при добавлении класса, а не при удалении класса (или перемещение назад в исходное положение).

jQuery('#menu').click(function() { 
    jQuery('#wrap').toggleClass('move-right', 1000); 
    }); 

CSS

#wrap { 
    position: relative; 
    bottom: 22px; 
    max-width: 1150px; 
    margin: 0 auto; 
    padding: 20px; 
} 

.move-right { 
    left: 9%; 
} 

Так как я могу получить эту анимацию в обоих направлениях?

Это просто слайд справа, а затем назад. Я думал, JQuery UI будет проще всего, но если мне не нужно его еще лучше

Answer 1

добавить левую позицию #wrap

затем изменить селектор .move-right, чтобы быть более точным

#wrap { 
    position: relative; 
    bottom: 22px; 
    max-width: 1150px; 
    margin: 0 auto; 
    padding: 20px; 
    left:0; 
} 

#wrap.move-right { 
    left: 9%; 
} 

http://jsfiddle.net/TrcLy/

Answer 2

Вы можете попробовать это, используя логическое значение, и если логическое значение истинно, попробуйте переместить его в другую сторону. Тогда ваш код должен быть что-то вроде этого:

JS:

var right = false; 
jQuery('#menu').click(function() { 
    if(!right) { 
    jQuery('#wrap').toggleClass('move-right', 1000); 
    right = true; 
    } else if(right) { 
    jQuery('#wrap').toggleClass('move-left', 1000); 
    right = false; 
    } 
}); 

CSS:

#wrap { 
    position: relative; 
    bottom: 22px; 
    max-width: 1150px; 
    margin: 0 auto; 
    padding: 20px; 
} 

.move-right { 
    left: 9%; 
} 

.move-left { 
    right: 9%; 
} 

Это в основном проверяет, является ли 'обертка' переместилась прямо на кнопке. Если нет, он перемещает его вправо, иначе он перемещается влево.

Answer 3

Вы можете использовать переход CSS3 для определения свойства перехода (слева) и времени (1s), см.: http://jsfiddle.net/m3sEn/1/ Для этого не требуется пользовательский интерфейс jQuery.

CSS:

#wrap { 
    left: 0; 
    transition: left 1s; 
} 

#wrap.move-right { 
    left: 9%; 
}