Как установить <div>для переключения своего размера с помощью jquery - PullRequest
Новая
       8

Как установить <div>для переключения своего размера с помощью jquery

2 голосов
/ 18 января 2012

Я пытаюсь, чтобы элемент переключал свой размер с помощью jquery ... Однако он ведет себя довольно странно, когда я нажимаю на него в первый раз, когда он расширяется (блестящий) Однако, когда я нажимаю на него снова, я не хочувернуться к исходному размеру, однако он возвращается к своему первоначальному размеру и затем снова расширяется ... при третьем щелчке он делает то же самое ... 4-й он сжимается, расширяется, сжимается, затем снова расширяется ... и так далее!

Есть ли способ избежать этого, полагаю, это потому, что он интерпретирует щелчок на большом поле как щелчок на большом и клик на маленьком?

Вот мой код:) 

$(document).ready(function(    
$("#box").click(function(){
 $("#box").toggle(function(){
        $("#box").animate({width:960},"fast","swing");
        $("#box").animate({height:500},"fast","swing");},
    function(){
        $("#box").animate({height:20},"fast","swing");
        $("#box").animate({width:20},"fast","swing");
    });
});

});

1 Ответ

1 голос
/ 18 января 2012

toggle - обработчик кликов. Вам не нужно оборачивать это в click: это сделано для вас. Фактически, вы перепривязываете код toggle каждый раз, когда щелкаете по элементу, отсюда и увеличивающиеся числа. 

$(document).ready(function (
$("#box").toggle(function () {
    $(this).animate({width: 960}, "fast", "swing");
    $(this).animate({height: 500}, "fast", "swing");
}, function () {
    $(this).animate({height: 20}, "fast", "swing");
    $(this).animate({width: 20}, "fast", "swing");
});
});

Обратите внимание, что я изменил повторные вызовы #box на this, что намного быстрее. Я мог бы также изменить два набора из двух строк на два отдельных вызова animate (.animate({width: 960, height: 500})), но разница в поведении могла бы быть желательной ...

...