driz Posted July 1, 2009 Share Posted July 1, 2009 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 More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.