开放的内容块滑动

Question

我有一个带有扩展内容框的网格插件，它可以在单击网格列表元素时打开。内容框在关闭时向下滑动，但我也希望它在打开时滑动。请参阅//**下面的代码。我正在尝试使mybloc.html( open内容)；打开动画。有人能帮忙吗？

如需参考，请访问：http://www.oriongunning.com/demo/gridder/basic.php

/*
 *  Gridder - v1.3.0
 *  A jQuery plugin that displays a thumbnail grid expanding preview similar to the effect seen on Google Images.
 *  http://www.oriongunning.com/
 *
 *  Made by Orion Gunning
 *  Under MIT License
 */
;(function($) {

    /* CUSTOM EASING */
    $.fn.extend($.easing,{
        def:"easeInOutExpo", easeInOutExpo:function(e,f,a,h,g){if(f===0){return a;}if(f===g){return a+h;}if((f/=g/2)<1){return h/2*Math.pow(2,10*(f-1))+a;}return h/2*(-Math.pow(2,-10*--f)+2)+a;}
    });    

    $.fn.gridderExpander = function(options) {

        /* GET DEFAULT OPTIONS OR USE THE ONE PASSED IN THE FUNCTION  */
        var settings = $.extend( {}, $.fn.gridderExpander.defaults, options );      

        return this.each(function() {

            var mybloc;
            var _this = $(this);
            var visible = false;

            // START CALLBACK
            settings.onStart(_this);

            // CLOSE FUNCTION
            function closeExpander(base, settings) {

                // SCROLL TO CORRECT POSITION FIRST
                if(settings.scroll){
                    $("html, body").animate({
                        scrollTop: base.find(".selectedItem").offset().top - settings.scrollOffset
                    }, {
                        duration: 200,
                        easing: settings.animationEasing
                    });
                }

                _this.removeClass("hasSelectedItem");


                // REMOVES GRIDDER EXPAND AREA
                visible = false;
                base.find(".selectedItem").removeClass("selectedItem");

                base.find(".gridder-show").slideUp(settings.animationSpeed, settings.animationEasing, function() {
                    base.find(".gridder-show").remove();
                    settings.onClosed(base);
                });
            }

            /* CLICK EVENT */
            _this.find(".gridder-list").on("click", function(e) {


                e.stopPropagation(); 

                var myself = $(this);

                /* ENSURES THE CORRECT BLOC IS ACTIVE */
                if (!myself.hasClass("selectedItem")) {
                    _this.find(".selectedItem").removeClass("selectedItem");
                    myself.addClass("selectedItem");
                }else{
                    // THE SAME IS ALREADY OPEN, LET"S CLOSE IT
                    closeExpander(_this, settings);
                    return;
                }

                /* REMOVES PREVIOUS BLOC */
                _this.find(".gridder-show").remove(); 



                /* SCROLL TO CORRECT POSITION FIRST */
                if(settings.scroll){
                    var offset = (settings.scrollTo === "panel" ? myself.offset().top + myself.height() - settings.scrollOffset : myself.offset().top - settings.scrollOffset );               
                    $("html, body").animate({
                        scrollTop: offset
                    }, {
                        duration: settings.animationSpeed,
                        easing: settings.animationEasing
                    });
                }

                /* ADD CLASS TO THE GRIDDER CONTAINER
                 * So you can apply global style when item selected. 
                 */
                if (!_this.hasClass("hasSelectedItem")) {
                    _this.addClass("hasSelectedItem");


                }

                /* ADD LOADING BLOC */
                var $htmlcontent = $("<div class=\"gridder-show loading\"></div>");
                mybloc = $htmlcontent.insertAfter(myself);

                /* EXPANDED OUTPUT */
                var currentcontent = $(myself.data("griddercontent")).html();
                var htmlcontent = "<div class=\"gridder-padding\">";

                        htmlcontent += "<div class=\"gridder-expanded-content\">";
                            htmlcontent += currentcontent;
                        htmlcontent += "</div>";
                htmlcontent += "</div>";
                mybloc.html(htmlcontent);
                // TRYING TO GET THIS CONTENT



                // IF EXPANDER IS ALREADY EXPANDED 
                if (!visible) {
                    mybloc.find(".gridder-padding").slideDown(settings.animationSpeed, settings.animationEasing, function() {
                        visible = true;

                        /* AFTER EXPAND CALLBACK */
                        if ( $.isFunction( settings.onContent ) ) {
                            settings.onContent( mybloc );
                        }
                    });
                } else {
                    mybloc.find(".gridder-padding").fadeIn(settings.animationSpeed, settings.animationEasing, function() {
                        visible = true;

                        /* CHANGED CALLBACK */
                        if ( $.isFunction( settings.onContent ) ) {
                            settings.onContent( mybloc );
                        }
                    });
                }            
            });

            /* NEXT BUTTON */
            _this.on("click", ".gridder-nav.next", function(e) {
                e.preventDefault();
                $(this).parents(".gridder-show").next().trigger("click");
            });

            /* PREVIOUS BUTTON */
            _this.on("click", ".gridder-nav.prev", function(e) {
                e.preventDefault();
                $(this).parents(".gridder-show").prev().prev().trigger("click");
            });

            /* CLOSE BUTTON */
            _this.on("click", ".gridder-close", function(e) {
                e.preventDefault();
                closeExpander(_this, settings);
            });

        });
    };

    // Default Options
    $.fn.gridderExpander.defaults = {
        scroll: true,
        scrollOffset: 30,
        scrollTo: "panel", // panel or listitem
        animationSpeed: 400,

    };

})(jQuery);

Answer 1

我用下面的简化代码创建了一个小提琴。这样做是为了让内容淡入：

var myself = $('#content');
var $htmlcontent = $("<div class=\"gridder-show loading\"></div>");
var mybloc = $htmlcontent.insertAfter(myself);

var currentcontent = 'More stuff here';
var htmlcontent = "<div class=\"gridder-padding\">";

htmlcontent += "<div class=\"gridder-expanded-content\">";
htmlcontent += currentcontent + "</div></div>";

// hide the block, add html and fade block in
mybloc.hide().html(htmlcontent).fadeIn(2000);