jQuery Animation Toggle

Question

Это довольно прямолинейная проблема. У меня в основном есть блок div на странице, который при щелчке увеличивается в размере, а при повторном нажатии возвращается к тому, что было. Моя проблема в том, что она просто не работает вообще. Кроме того, я уверен, что существует намного более чистый способ переключения между двумя состояниями анимации, чем оператор if, подобный этому, но я не уверен, как именно это делать.

$(document).ready(function(){ 
    var toggle = 0; 
    $(".login").click(function(){ 
     if($toggle == 0){ 
      $(this).animate({ 
       height: '200', 
      }, 500, function(){ 
      }); 
      $toggle = 1; 
     } 
     else if($toggle == 1){ 
      $(this).animate({ 
       height: '100', 
      }, 500, function(){ 
      }); 
      $toggle = 0; 
     } 
    }); 
}); 

Соответствующий HTML-код просто

<div class="login">Click Me</div> 

Позвольте мне знать, если что-нибудь еще нужно.

Answer 1

Ваш код не работает, потому что вы использовали toggle в одном месте и $toggle в другой.

Но это можно сделать более просто, как это:

$(document).ready(function(){ 
    $(".login").toggle(function() { 
     $(this).animate({height: '200'}); 
    }, function() { 
     $(this).animate({height: '100'}); 
    });​ 
}); 

Работа демо здесь: http://jsfiddle.net/jfriend00/5Wu6m/

Когда дан список функций в качестве аргументов, метод .toggle(fn1, fn2) будет чередоваться между функциями данных Отправной с первым. Это автоматически отслеживает состояние переключения для вас - вам не обязательно это делать.

jQuery doc is here. Существует несколько форм .toggle() в зависимости от используемых аргументов, поэтому вы не всегда находите правильный при поиске документа jQuery.

Answer 2

Обратите внимание на разницу между

var toggle = 0; 

и

if($toggle == 0){ 

Вы определяете переменную с именем toggle, а затем использовать его в качестве $toggle.

Answer 3

Попробуйте

$(".login").click(function(){ 
    $(this).slideToggle(500); 
} 

Answer 4

Две проблемы, которые я вижу. Один из них - это область вашей переменной переключения. Другой является общим после одного атрибута в списке атрибутов анимации. Попробуйте это:

$(document).ready(function(){ 
    $(".login").click(function(){ 
     if($(this).hasClass('expanded')){ 
      $(this) 
       .removeClass('expanded') 
       .stop() 
       .animate({height: '100px'}, 500) 
      ; 
     } 
     else{ 
      $(this) 
       .addClass('expanded') 
       .stop() 
       .animate({height: '200px'}, 500) 
      ;     
     } 
    }); 
}); 

Answer 5

var H=H==200?100:200; 
$(".login").on('click', function(){ 
    $(this).animate({height: H}, 500, function() {H=H==200?100:200;}); 
}); 

FIDDLE

Answer 6

Я хочу защитить свое решение тумблер, это не неправильно.

В некоторых случаях только этот способ работы будет работать правильно, а .toggle() сделает некоторые странные вещи.

Только вместо if($toggle == 0){... вам нужно использовать if (toggle === 0){