Jump to content

Jquery Easing


Recommended Posts

Hi, if you visit the following website: http://driz.co.uk/You will see that I have a link in the top left corner that uses Jquery to make a grid appear. I have the following files: jquery, jquery.grid, and jquery.easing.What I'm wanting to do is add the Bounce effect that the easing plugin has to my grid instead of it just sliding down and up. I've had a play but just end up breaking it :/Here is the code for jquery.grid hopefully some one can see an easy way to add in the easing that I desire thanks.

/* * @ description: Plugin to display blueprint/bluetrip gridlines See http://www.blueprintcss.org or http://bluetrip.org * @author: noel_g(twitter) based on badlyDrawnToy sharp / http://www.badlydrawntoy.com * @license: Creative Commons License - ShareAlike http://creativecommons.org/licenses/by-sa/3.0/ * @version: 1.0 22th April 2009 * @params: *   options - Default options are as follows. They may be overridden by passing in this param *	 var defaults = { *	 z_index: 999, *	 img_path: '/img/', *	 opacity:.6, *	 margin:'0 auto' *	 };*/ (function ($) {  $.fn.addGrid = function (options) {	var defaults = {	  z_index: 999,	  img_path: '/img/',	  opacity:.6,	  margin:'0 auto'	}; 	// Extend our default options with those provided.	var opts = $.extend(defaults, options);		  	return this.each(function () {	  var $el = $(this);	  var height = $el.height(); 	  var wrapper = $('<div id="grid_overlay"/>')		.appendTo($el)		.css({		  'display':'none',		  'position':'absolute',		  'top':0,		  'z-index':(opts.z_index -1),		  'height':height,		  'opacity':opts.opacity,		  'width':'100%'}); 	  $('<div/>')		.addClass('container_16')		.css({		  'margin':opts.margin,		  'width':'980px',		  'height':height,		  'background-image': 'url('+opts.img_path+ 'grid.png)'})		.appendTo(wrapper); 		// add toggle		$('<div>grid on</div>')		  .appendTo($el)		  .css({			'position':'absolute',			'top':0,			'left':0,			'z-index':opts.z_index,			'background': '#222',			'color':'#fff',			'padding': '3px 6px',			'width': '40px',			'text-align':'center'		  })		  .hover( function() {			$(this).css("cursor", "pointer");		  }, function() {			$(this).css("cursor", "default");		  })		  .toggle( function () {			$(this).text("grid off");			$('#grid_overlay').slideDown();		  },		  function() {			$(this).text("grid on");			$('#grid_overlay').slideUp();		  });	});  };})(jQuery);

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Create New...