JQuery Анимация Переключить

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 здесь . Существует несколько форм .toggle () в зависимости от используемых аргументов, поэтому вы не всегда можете найти правильный при поиске в документе jQuery.

Answer 2

Попробуйте

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

Answer 3

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

var toggle = 0;

и

if($toggle == 0){

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

Answer 4

Я хочу защитить ваше решение о переключении, оно не является неправильным.

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

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

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

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

$(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)
            ;                
        }
    });
});