Month: February 2014

JQuery’s .show() and .hide() effects are useful, but I’m not cool with their width resizing.
This plugin allows you to show and hide elements with a vertical slide and a fading effect.

You can use the .showDown(), .hideUp() and .verticalFade() functions the same way you would use jQuery’s .fadeIn(), .fadeOut() or .fadeToggle() effects.

$('#trigger-example').click(function () {
  $('#example').verticalFade({ duration: 'slow' });
});

https://gist.github.com/WebMaestroFr/9316374

Plugin

The jQuery plugin is very simple. Here is the full code.

(function ($) {
  var getUnqueuedOpts = function (opts) {
    return {
      queue: false,
      duration: opts.duration,
      easing: opts.easing
    };
  };
  $.fn.showDown = function (opts) {
    opts = opts || {};
    $(this).hide().slideDown(opts).animate({ opacity: 1 }, getUnqueuedOpts(opts));
  };
  $.fn.hideUp = function (opts) {
    opts = opts || {};
    $(this).show().slideUp(opts).animate({ opacity: 0 }, getUnqueuedOpts(opts));
  };
  $.fn.verticalFade = function (opts) {
    opts = opts || {};
    if ($(this).is(':visible')) {
      $(this).hideUp(opts);
    } else {
      $(this).showDown(opts);
    }
  };
}(jQuery));