jQuery custom functions
<p>Why the value of <code>oldHeight</code> is not overridden ? It still has <code>oldHeight</code> to <code>80</code> not what i have passed as argument. Even if i pass argument <code>newHeight</code>, it will also not override it. But according to the <a href="http://docs.jquery.com/Plugins/Authoring" rel="nofollow">documentation</a>, it will automatically updated. Here's the code:</p>

<pre><code>( function($) {
$.fn.bad = function(callback) {
    var options;
    var settings = $.extend({
        "oldHeight":"80",
        "newHeight":"200"
    }, options);
    return this.each( function() {
        var that$ = $(this);
        that$.bind("mouseenter", function() {
            $(this).animate({ "height" : settings.newHeight+"px" });
        }).bind("mouseleave", function() {
            $(this).animate({ "height" : settings.oldHeight+"px" });
        });
    });
}
})(jQuery);
$(".box").bad({"oldHeight":"400"});
</code></pre>

<p>And this ===> <a href="http://jsfiddle.net/cGSNn/" rel="nofollow"><code>Fiddle</code></a></p>
