Skip to content

Instantly share code, notes, and snippets.

@futjikato
Created May 20, 2012 15:03
Show Gist options
  • Save futjikato/2758417 to your computer and use it in GitHub Desktop.
Save futjikato/2758417 to your computer and use it in GitHub Desktop.
Small plugin which combines a fade with a slide effect...
(function($){
function _out($this, styles, duration) {
var animationObj = {};
$.each(styles, function(i,v){
$this.data('slidefade_' + v, $this.css(v));
animationObj[v] = 0;
});
$this.animate(animationObj, duration, function(){
$this.hide();
$.each(styles, function(i,v){
$this.css(v, $this.data('slidefade_' + v));
$this.removeData('slidefade_' + v);
});
});
}
function _in($this, styles, duration) {
var animationObj = {};
$.each(styles, function(i,v){
animationObj[v] = $this.css(v);
$this.css(v, 0);
});
$this.show().animate(animationObj, duration);
}
$.fn.slidefadeToggle= function(duration, userStyles){
var styles = ['height', 'paddingTop', 'paddingBottom', 'marginTop', 'marginBottom', 'opacity'];
if($.isArray(userStyles)) {
styles = $.merge(styles, userStyles);
}
this.each(function(){
var $this = $(this);
if($this.is(':visible')) {
_out($this, styles, duration);
} else {
_in($this, styles, duration);
}
});
}
})(jQuery);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment