Reorganized the different effects to be in fx.js, instead of jquery.js - and cleaned up some of the documentation.

This commit is contained in:
John Resig 2007-01-07 21:43:38 +00:00
parent 386c0bc8a6
commit 0798c6e64e
3 changed files with 564 additions and 512 deletions

View file

@ -187,32 +187,32 @@ jQuery.fn.extend({
* data as the second paramter (and the handler function as the third), see * data as the second paramter (and the handler function as the third), see
* second example. * second example.
* *
* @example $("p").bind( "click", function() { * @example $("p").bind("click", function(){
* alert( $(this).text() ); * alert( $(this).text() );
* } ) * });
* @before <p>Hello</p> * @before <p>Hello</p>
* @result alert("Hello") * @result alert("Hello")
* *
* @example var handler = function(event) { * @example function handler(event) {
* alert(event.data.foo); * alert(event.data.foo);
* }; * }
* $("p").bind( "click", {foo: "bar"}, handler) * $("p").bind("click", {foo: "bar"}, handler)
* @result alert("bar") * @result alert("bar")
* @desc Pass some additional data to the event handler. * @desc Pass some additional data to the event handler.
* *
* @example $("form").bind( "submit", function() { return false; } ) * @example $("form").bind("submit", function() { return false; })
* @desc Cancel a default action and prevent it from bubbling by returning false * @desc Cancel a default action and prevent it from bubbling by returning false
* from your function. * from your function.
* *
* @example $("form").bind( "submit", function(event) { * @example $("form").bind("submit", function(event){
* event.preventDefault(); * event.preventDefault();
* } ); * });
* @desc Cancel only the default action by using the preventDefault method. * @desc Cancel only the default action by using the preventDefault method.
* *
* *
* @example $("form").bind( "submit", function(event) { * @example $("form").bind("submit", function(event){
* event.stopPropagation(); * event.stopPropagation();
* } ) * });
* @desc Stop only an event from bubbling by using the stopPropagation method. * @desc Stop only an event from bubbling by using the stopPropagation method.
* *
* @name bind * @name bind
@ -241,9 +241,9 @@ jQuery.fn.extend({
* data as the second paramter (and the handler function as the third), see * data as the second paramter (and the handler function as the third), see
* second example. * second example.
* *
* @example $("p").one( "click", function() { * @example $("p").one("click", function(){
* alert( $(this).text() ); * alert( $(this).text() );
* } ) * });
* @before <p>Hello</p> * @before <p>Hello</p>
* @result alert("Hello") * @result alert("Hello")
* *
@ -316,10 +316,6 @@ jQuery.fn.extend({
}); });
}, },
// We're overriding the old toggle function, so
// remember it for later
_toggle: jQuery.fn.toggle,
/** /**
* Toggle between two function calls every other click. * Toggle between two function calls every other click.
* Whenever a matched element is clicked, the first specified function * Whenever a matched element is clicked, the first specified function
@ -341,9 +337,10 @@ jQuery.fn.extend({
* @cat Events * @cat Events
*/ */
toggle: function() { toggle: function() {
// save reference to arguments for access in closure // Save reference to arguments for access in closure
var a = arguments; var a = arguments;
return typeof a[0] == "function" && typeof a[1] == "function" ? this.click(function(e) {
return this.click(function(e) {
// Figure out which function to execute // Figure out which function to execute
this.lastToggle = this.lastToggle == 0 ? 1 : 0; this.lastToggle = this.lastToggle == 0 ? 1 : 0;
@ -352,10 +349,7 @@ jQuery.fn.extend({
// and execute the function // and execute the function
return a[this.lastToggle].apply( this, [e] ) || false; return a[this.lastToggle].apply( this, [e] ) || false;
}) : });
// Otherwise, execute the old toggle function
this._toggle.apply( this, arguments );
}, },
/** /**

View file

@ -1,7 +1,16 @@
jQuery.fn.extend({ jQuery.fn.extend({
// overwrite the old show method /**
_show: jQuery.fn.show, * Displays each of the set of matched elements if they are hidden.
*
* @example $("p").show()
* @before <p style="display: none">Hello</p>
* @result [ <p style="display: block">Hello</p> ]
*
* @name show
* @type jQuery
* @cat Effects
*/
/** /**
* Show all matched elements using a graceful animation and firing an * Show all matched elements using a graceful animation and firing an
@ -24,13 +33,29 @@ jQuery.fn.extend({
* @see hide(String|Number,Function) * @see hide(String|Number,Function)
*/ */
show: function(speed,callback){ show: function(speed,callback){
return speed ? this.animate({ return speed ?
height: "show", width: "show", opacity: "show" this.animate({
}, speed, callback) : this._show(); height: "show", width: "show", opacity: "show"
}, speed, callback) :
this.each(function(){
this.style.display = this.oldblock ? this.oldblock : "";
if ( jQuery.css(this,"display") == "none" )
this.style.display = "block";
});
}, },
// Overwrite the old hide method /**
_hide: jQuery.fn.hide, * Hides each of the set of matched elements if they are shown.
*
* @example $("p").hide()
* @before <p>Hello</p>
* @result [ <p style="display: none">Hello</p> ]
*
* @name hide
* @type jQuery
* @cat Effects
*/
/** /**
* Hide all matched elements using a graceful animation and firing an * Hide all matched elements using a graceful animation and firing an
@ -53,9 +78,42 @@ jQuery.fn.extend({
* @see show(String|Number,Function) * @see show(String|Number,Function)
*/ */
hide: function(speed,callback){ hide: function(speed,callback){
return speed ? this.animate({ return speed ?
height: "hide", width: "hide", opacity: "hide" this.animate({
}, speed, callback) : this._hide(); height: "hide", width: "hide", opacity: "hide"
}, speed, callback) :
this.each(function(){
this.oldblock = this.oldblock || jQuery.css(this,"display");
if ( this.oldblock == "none" )
this.oldblock = "block";
this.style.display = "none";
});
},
// Save the old toggle function
_toggle: jQuery.fn.toggle,
/**
* Toggles each of the set of matched elements. If they are shown,
* toggle makes them hidden. If they are hidden, toggle
* makes them shown.
*
* @example $("p").toggle()
* @before <p>Hello</p><p style="display: none">Hello Again</p>
* @result [ <p style="display: none">Hello</p>, <p style="display: block">Hello Again</p> ]
*
* @name toggle
* @type jQuery
* @cat Effects
*/
toggle: function( fn, fn2 ){
return fn ?
this._toggle( fn, fn2 ) :
this.each(function(){
jQuery(this)[ jQuery(this).is(":hidden") ? "show" : "hide" ]
.apply( jQuery(this), arguments );
});
}, },
/** /**

View file

@ -742,7 +742,7 @@ jQuery.fn = jQuery.prototype = {
* @example $("p").find("span").end(); * @example $("p").find("span").end();
* @before <p><span>Hello</span>, how are you?</p> * @before <p><span>Hello</span>, how are you?</p>
* @result [ <p>...</p> ] * @result [ <p>...</p> ]
* desc Selects all paragraphs, finds span elements inside these, and reverts the * @desc Selects all paragraphs, finds span elements inside these, and reverts the
* selection back to the paragraphs. * selection back to the paragraphs.
* *
* @name end * @name end