JQuery .toggle(), вызывающий элемент, исчезает при загрузке страницы.

Question

Я пытаюсь создать эффект, когда вы нажимаете на элемент, размер которого увеличивается, и когда он снова нажимается, он возвращается к исходному размеру. По какой-то причине, когда я использую метод переключения JQuery, он заставляет элемент (в этом примере div) сжиматься при загрузке страницы. Вот ссылка на JSFiddle я создал: http://jsfiddle.net/6HNkF/ и вот мой JavaScript:

$(document).ready(function(){ 
     $('#mainImg').toggle(
      function(){ 
       $('#mainImg').animate({ 
        width: '1000', 
        height: '1000' 
       }, 500); 
      }, 
      function(){ 
       $('#mainImg').animate({ 
        width: '100', 
        height: '100' 
       }, 500); 
      } 
     ); 
    }); 

Answer 1

toggle как событие щелчка осуждался в 1.8. и, наконец, удалить в версии 1.9.

.toggle(function, function, ...) removed

Это "щелкните элемент для выполнения определенных функций" подпись .toggle(). Его не следует путать с «изменением видимости элемента» .toggle(), который не устарел. Первый из них удаляется, чтобы уменьшить путаницу и повысить потенциал модульности в библиотеке. Плагин jQuery Migrate можно использовать для восстановления функциональности.

As you can see, он работает с версией 1.8.

Answer 2

.toggle(), который вы используете, был удален в jQuery 1.9. Вы можете включить jquery-migrate, который добавляет в этих старых методов обратно в новые версии JQuery:

<script src="http://code.jquery.com/jquery-latest.js"></script> 
<script src="http://code.jquery.com/jquery-migrate-1.1.1.js"></script> 

Я не знаю, почему они избавились от него. Это был полезный метод.

Answer 3

Функциональность toggle больше не доступна в jQuery 1.9+. То, что вы пытаетесь достичь можно удобно сделать с CSS переходов и класс:

JS:

$(document).ready(function() { 
    $('#mainImg').click(function() { 
     $(this).toggleClass("wide"); 
    }); 
}); 

CSS:

#mainImg{ 
    width:100px; 
    height:100px; 
    transition: all 0.5s; 
} 
#mainImg.wide{ 
    width:1000px; 
    height:1000px; 
} 

Вы можете найти здесь демонстрацию : http://jsfiddle.net/WCwXm/

В качестве общего решения вы можете повторно ввести Альтернативой методу toggle под другим именем:

(function($) { 
$.fn.alternate = function() { 
    var args = arguments, 
     currIndex = 0; 
    function toggler(e) { 
     e.preventDefault(); 
     return args[(currIndex++) % args.length].apply(this); 
    } 
    return this.click(toggler); 
}; 
})(jQuery); 

Вы можете найти демонстрацию этого here.