Кнопка JQuery FadeIn FadeOut не работает - PullRequest
Новая
       7

Кнопка JQuery FadeIn FadeOut не работает

0 голосов
/ 07 мая 2011

У меня есть форма с кнопкой сохранения.При нажатии кнопки сохранения запускается ajax для сохранения содержимого формы.Это работает.У меня проблемы с кнопкой fadein fadeout.Текст кнопки сохранения - «Сохранить как черновик».При нажатии я бы хотел, чтобы он исчезал, измените текст на «Черновик сохранен в [время]», а затем добавьте его, чтобы показать, что он был сохранен, и время, когда он был сохранен.Через несколько секунд я бы хотел, чтобы это сообщение кнопки исчезло и было заменено исходной кнопкой «Сохранить как черновик».

Я думаю, что мне нужно вложить функции затухания в функции, но мои способности к затуханию в jqueryминимальны и быстро исчезают:)

Ниже приведена часть успеха ajax .... 

success: function(data) {
    var date = new Date(),
    hours = date.getHours(),
    minutes = date.getMinutes();

    if (hours > 12) hours = hours - 12;
    if (minutes < 10) minutes = '0' + minutes;

    var save_draft = '<div id="save-button" class="button-clone">Save as Draft</div>';
    var draft_saved = '<div id="save-button" class="button-clone">Draft Saved at ' + hours + ':' + minutes + '</div>';

    $('#save-button').fadeOut(1000);
    $('#save-button').replaceWith(draft_saved);
    $('#save-button').fadeIn(1000);
    $('#save-button').fadeOut(1000);
    $('#save-button').replaceWith(save_draft);
    $('#save-button').fadeIn(1000);
}

Ответы [ 3 ]

1 голос
/ 07 мая 2011

Поскольку каждая анимация асинхронная, вам нужно вызывать любой другой метод внутри функции обратного вызова .

EDIT

Извините, это не сработало. Также корректируется с помощью fadeIn: 

$('#save-button').fadeOut("slow", function() {
    $('#save-button').replaceWith(draft_saved);
    $('#save-button').hide().fadeIn(1000, function() {
        $('#save-button').fadeOut(1000, function() {
            $('#save-button').replaceWith(save_draft);
            $('#save-button').hide().fadeIn(1000);
        });
    });
});

Позвольте мне объяснить, почему это hide() необходимо:

Когда вы fadeOut какой-то элемент, jQuery помещает display: none непосредственно в этот HTML. Но вы заменяете другим HTML (методом replaceWith()). Но fadeIn() только затемняет элементы, которые были скрыты. Итак, нам нужно скрыть новый HTML, и тогда произойдет fadeIn().

0 голосов
/ 07 мая 2011

Вы должны сделать это: 

$('#save-button').fadeOut(1000, function(){
$('#save-button').replaceWith(draft_saved, function(){
$('#save-button').fadeIn(1000, function(){
$('#save-button').fadeOut(1000, function(){
$('#save-button').fadeIn(1000);
}););}););}););});

Я не делал отступ в коде, чтобы он не выглядел грязно. Надеюсь, это поможет.Приветствия

0 голосов
/ 07 мая 2011

Ты прав.Вам нужно гнездиться.Попробуйте что-то вроде этого ... 

var date = new Date(),
hours = date.getHours(),
minutes = date.getMinutes();

if (hours > 12) hours = hours - 12;
if (minutes < 10) minutes = '0' + minutes;

var save_draft = '<div id="save-button" class="button-clone">Save as Draft</div>';
var draft_saved = '<div id="save-button" class="button-clone">Draft Saved at ' + hours + ':' + minutes + '</div>';

$('body').append(save_draft).;

$('#save-button').fadeOut(1000,function(){
    $('#save-button').replaceWith(draft_saved);
    $('#save-button').fadeIn(1000,function(){
        $('#save-button').fadeOut(1000, function(){
            $('#save-button').replaceWith(save_draft);
            $('#save-button').fadeIn(1000);
        });
    });
});
...