jQuery fadeOut / fadeIn не работает должным образом? - PullRequest
Новая
       14

jQuery fadeOut / fadeIn не работает должным образом?

7 голосов
/ 04 октября 2011

Я пытаюсь показать по одному fieldset за раз, основываясь на выборе пользователя. Теория заключается в том, что все наборы полей должны сначала скрываться, а затем показываться выбранный набор полей. Я использую функции jQuery fadeOut и 'fadeIn`.

Вы можете увидеть скрипку этого здесь .

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

Ответы [ 3 ]

6 голосов
/ 04 октября 2011

Вы также можете использовать «обещание» http://api.jquery.com/jQuery.when/, чтобы быть уверенным, что исчезновение происходит после того, как исчезнет набор полей. 

$(function() {
    var ownershipType = $('#ownershipType').first();
    var fieldsets = $('fieldset');
    ownershipType.change(function() {
        var promise = fieldsets.fadeOut(2000);
        $.when(promise).then( function () {$('fieldset[data-ownership-type=' + ownershipType.val() + ']').fadeIn('fast');
        });
    });
});

http://jsfiddle.net/DtaHQ/26/

4 голосов
/ 04 октября 2011

Проблема в том, что у вас уже есть скрытый fieldset, и для этих элементов анимация fadeOut срабатывает сразу, потому что она уже скрыта.

Попробуйте изменить на это: 

$(function() {
    var ownershipType = $('#ownershipType').first();
    ownershipType.change(function() {
        $('fieldset:visible').fadeOut(2000, function() {
            $('fieldset[data-ownership-type=' + ownershipType.val() + ']').fadeIn('fast');
        });
    });
});

Код: http://jsfiddle.net/DtaHQ/20/

3 голосов
/ 04 октября 2011

Измените свой код на 

$(function() {
    var ownershipType = $('#ownershipType').first();
    var fieldsets = $('fieldset');
    ownershipType.change(function() {
        $('fieldset:visible').fadeOut(2000, function() {
            $('fieldset[data-ownership-type=' + ownershipType.val() + ']').fadeIn('fast');
        });
    });
});

Вы хотите только затемнить набор полей, который в данный момент виден.

http://jsfiddle.net/DtaHQ/24/

...