2013-03-19 4 views
1

Я пытаюсь развернуть ящик при щелчке, и как только он снова щелкнут, я хочу вернуть его в нормальное состояние. это мой текущий код.Попытка переключить анимацию по клику

$(".box").click(function() { 
    $(this).toggle(function() { 
     $(this).animate({ 
      width: "200px", 
      height: "200px" 
      }, "slow"); 
     }, function() { 
     $(this).animate({ 
      width: "50px", 
      height: "50px" 
      }, "slow"); 
     }); 
}); 

оригинальный размер 50px и я хочу, чтобы переключаться между 50 пикселей и 200 пикселей. Используя этот код, при щелчке по ящике окно просто исчезает. Какие-либо предложения?

ответ

2

Это потому, что вы используете jQuery 1.9+ и нет jQuery .toggle() метод события, jQuery использует метод отображения изображения и скрывает ваш элемент. .toggle() метод события устарел от jQuery 1.7 и был удален в jQuery 1.9.

$(".box").click(function() { 
    var $this = $(this), 
     val = $this.height() == 200 ? '50px' : '200px'; 
    $this.stop().animate({ 
     width: val, 
     height: val 
    }, "slow"); 
}); 

http://jsfiddle.net/q9UMA/

Смежные вопросы