Анимация ширины div с использованием процентов в jQuery

Question

Я пытаюсь изменить ширину div в процентах, когда нажата кнопка (в данном случае другая div). У меня он работает в этом example, но не может успешно воссоздать его в фактическом коде для моего сайта, примером которого является here. Они оба идентичны моим глазам, но что-то, по-видимому, идет не так.

используется браузер:

$('#button').click(function() { 
if(!collapsed){ 
    $('.left').animate({width: '10%'}); 
} else { 
    $('.left').animate({width: '50%'}); 
} 
collapsed = !collapsed; }); 

Тем не менее, по крайней мере, во втором примере, ничего не результаты его.

Answer 1

Две проблемы с вашей версией:

1. jsFiddle не включают в JQuery.
2. Вы не указали переменную collapsed, так что вы получили ошибку в консоли.

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

var collapsed = false; 
$('#button').click(function() { 
    $('.left').animate({ width: collapsed ? '50%' : '10%' }); 
    collapsed = !collapsed; 
}); 

Working example

Он также может быть стоит добавить stop(true) перед вызовом animate() предотвратить последовательные щелчки заполнения очереди анимации.