задержка в jQuery slideDown используя очереди


У меня есть задание создать функцию, которая добавляет несколько сообщений на страницу, и другого, чтобы показать их в прошлом первого порядка с помощью jQuery slideDown() эффект.

jsFiddle

jQuery("#input1").click(function()
{
    //Represents the first function to add the messages
    jQuery.each(["<div>1</div>", "<div>2</div>", "<div>3</div>"],
        function(index, item)
        {
            var jDiv =jQuery(item);
            jDiv.hide();
            jQuery(".parent").prepend(jDiv);
        });

    //represents the second function to show them.
    var jParent = jQuery(".parent");
    jParent.children().reverse().each(function()
    {
        var jThis= jQuery(this);
        jParent.queue( function()
       {
           jThis.slideDown(function()
           {
               jParent.dequeue();
           });

       });
    }); 
});

(обратное от этого ответа)

jQuery.fn.reverse = [].reverse;

Это, кажется, ужасно куча кода, просто чтобы показать их один за другим. Есть ли способ, чтобы очистить/удалить избыточный код?



Комментарии
2 ответа

Я бы использовал функцию рекурсии в очереди на jQuery.

Центральная часть displayNextHiddenMessagesIn функции. Как видно из названия, она захватывает следующий скрытое сообщение и отображает его. После появления сообщения, она вызывает эту функцию снова... цикл, пока все сообщения не будут видны.

Мне кажется, это гораздо более читабельным и проще в обслуживании. Кроме того, было бы тривиально, чтобы другой родитель сообщение и повторно использовать этот же код (т. е. сообщения об ошибках и информационные сообщения).

(function($) {

function createMessageFor(parent, contents) {
var $parent = $(parent);

for(var content in contents) {
var $message = newMessage(contents[content]);

$parent.prepend($message);
}

function newMessage(text) {
return $("<div />").text(text).hide();
};
}

var displayNextHiddenMessagesIn = function(parent) {
var $parent = $(parent);

$parent.find('div:hidden:last').slideDown(function() {
displayNextHiddenMessagesIn($parent);
});
};

$("#input1").click(function()
{
createMessageFor('.parent', [1,2,3]);
displayNextHiddenMessagesIn('.parent');
});

})(jQuery);

увидеть его в действии: http://jsfiddle.net/natedavisolds/TP66b/6/

Обновление

Вот как выглядит плагин:

(function($) {
$.fn.fanDownHiddens = function() {
return this.each(function() {
var $parent = $(this);

$parent.find('div:hidden:last').slideDown(function() {
$parent.fanDownHiddens();
});
});
}
})(jQuery);

И тогда onload со тестовых данных.

(function($) {

$(function() {
$("#input1").click(function() {
setupTestMessages('.parent');
$('.parent').fanDownHiddens();
});
});

function setupTestMessages(parent) {
var $parent = $(parent),
testData = [1,2,3];

for(var content in testData) {
var $message = newMessage(testData[content]);

$parent.prepend($message);
}

function newMessage(text) {
return $("<div />").text(text).hide();
};
}
})(jQuery);

Вот плагин работает: http://jsfiddle.net/natedavisolds/TP66b/12/

2
ответ дан 2 марта 2012 в 02:03 Источник Поделиться

Я пропустила вторую кнопку для простоты.

http://jsfiddle.net/WjaDE/7/

var jParent = $("#parent"); 
// used an id for the unique element
// cached the element up front
var DURATION = 500;

$("#input1").click(function() {
$.each(['1', '2', '3'], // simplified the array
function(index, item) {
var jDiv = $('<div class=box></div>');
// added a class to each to improve the css and eliminated the .hide()
jDiv.html( item );
jParent.prepend(jDiv);
jDiv.delay(DURATION * index);
// used a variable delay to deal with the timing
jDiv.slideDown(DURATION);
});
});

1
ответ дан 7 мая 2011 в 01:05 Источник Поделиться