0

コンテナ内のすべての要素を非表示にし、fadeIn（）またはjqueryのanimate関数を使用して、設定された間隔でそれらを表示するjQueryプラグインに取り組んでいます。

これまでのところ、すべての要素を配列にまとめることができました。そうすれば、アラートでhtmlを出力できます。

$(children).each(function (index, val) {
     alert(this);
});

ただし、要素をhtmlとしてドキュメントに再度追加しようとすると、うまくいきません。

私はもう試した

$(container).append(this);

と

$(container).appendChild(this);

しかし、それでも運はありません。

私が理想的に必要としているのは、各要素を再びfadeIn（）できるようにし、設定された間隔で各要素にcssクラスを追加できるようにすることです。

(function($) {

$.fn.myPlugin = function (options) {

    // Set default options

    var defaults = {
        rate : '1000',
    }

    var options = $.extend(defaults, options);


    // Hide all elements within parent container
    $(this).children().hide();


    var container = $(this).selector;

    // Store children in loader variable
    var loader = $(this).children();


    // Put all elements into an array

    var children = [];

    $(loader).each(function(idx) {
        children.push(this.outerHTML); 
    });


    // Iterate over array and fadeIn elements;

    $(children).each(function (index, val) {


    });


};

})(jQuery);
4

1 に答える 1

2

このように考えますか？： http： //jsfiddle.net/zKpp2/1/

(function ($) {
    $.fn.myPlugin = function (options) {
        // Set default options
        var defaults = $.extend({
            rate: 1000,
        }, options);

        // Hide all elements within parent container
        $(this).children().hide();
        var container = $(this).selector;

        // Store children in loader variable
        var loader = $(this).children(),
            length = loader.length;

        (function fadeLoop(index){
            if (index < length)
                loader.eq(index).fadeIn(defaults.rate, function(){
                    $(this).addClass('foo'); // add class when done animating.
                    fadeLoop(index + 1);
                });
        })(0);
    };
})(jQuery);

ただし、もう少し柔軟なものをお勧めします：http: //jsfiddle.net/zKpp2/3/

(function ($) {
    $.fn.myPlugin = function (options) {
        // Set default options
        var def = $.extend({
            rate: 1000,
            onStepStart: $.noop,
            onStepFinish: $.noop,
            onFinish: $.noop
        }, options);

        // Hide all elements within parent container
        $(this).children().hide();
        var container = this;

        // Store children in loader variable
        var loader = $(this).children(),
            length = loader.length;

        (function fadeLoop(index) {
            if (index < length) {
                def.onStepStart.apply(
                loader.eq(index).fadeIn(def.rate, function () {
                    def.onStepFinish.apply(this);
                    fadeLoop(index + 1);
                }).get());
            } else def.onFinish.apply(container.get());
        })(0);

        return container;
    };
})(jQuery);

あなたが望む同じこと（そして他の多くのこと）を達成するためにあなたがこのように使うことができるもの：

$("#loader").myPlugin({
    rate: 1000,
    onStepStart: function(){
        $(this).addClass("foo");  // "this" just started fading in
    },
    onStepFinish: function(){
        $(this).removeClass("foo").addClass("bar");  // "this" finished fading in
    },
    onFinish: function(){
        $(this).css("background", "green");  // "this" is the original selector.
    }
}).css("background", "red");  // chains properly

編集—プラグインの2番目のバージョンは、etcが実際に関数であることを確認しないためdef.onStepStart、関数以外に設定すると機能しなくなります。

于 2013-01-18T17:10:17.700 に答える