內容塊滑動打開

Question

我有一個帶有擴展內容框的網格插件，它可以在單擊網格列表元素時打開。內容框在關閉時滑落，但我也希望它在打開時滑動。請參閱下面的代碼// **。我正在嘗試製作mybloc.html（htmlcontent）;開啓動畫。任何人都可以幫忙嗎？

僅供參考，請訪問：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

我創建了一個fiddle出的簡化代碼如下圖所示。這適用於讓內容淡入：

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);