Question

Mostly regarding animation;

I have several elements with different animations which may be shown or hidden using their own unique settings; Pop-downs with a slight bounce, menus fading in/out, etc.

Several buttons/widgets/events will hide/show those elements, and I want to avoid having to copy the options in the hide() or show() for each potential call. I also don’t want to need to keep track of a list of default options somewhere; I’d like to just set their animation settings as they are initialized, so any scripts later don’t need to worry about passing in options.

Is there a way to save the default options for select targets? Something like…

$('#foo').setDefaultOptions('hide', {/* New Defaults */});
// or...
$('#foo').hide.defaults = {/* New Defaults */};

So calling the below will just use those options without further input:

$('#foo').hide(); // Uses those default values set earlier

Thank you.

Answer 1

Use .data() to set the options on the object itself after you’ve created it. Then, create your own version of .hide() and .show() that gets the options from .data().

// define custom hide function that retrieves default options
$.fn.myHide = function() {
   this.each(function() {
       var item = $(this);
       item.hide(item.data("animOptions"));
   });
   return this;
}

// set default options once
$("#foo").data("animOptions", {...});


// from then on, just call the method and it uses the object-specific default options
$("#foo").myHide();