Adding Easing to this Script.
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);