jquery - jQuery custom functions

Question

Why the value of oldHeight is not overridden ? It still has oldHeight to 80 not what i have passed as argument. Even if i pass argument newHeight, it will also not override it. But according to the documentation, it will automatically updated. Here's the 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"});

And this ===> Fiddle

Answer 1

You initialized "options" with null with var options; and extended your settings with an empty value.

( function($) {
    $.fn.bad = function(options) {
            var settings = $.extend({
                "oldHeight":"80",
                "newHeight":"200"
            }, options);

    ...

this works.

Answer 2

Try ths,

var settings = {};
var settings = $.extend(settings, {
    "oldHeight":"80",
    "newHeight":"200"
}, options);

Your function needs to accept the options not the callback (if there is no callback being used).

So your code will be,

(function($) {
$.fn.bad = function(options) {
    var settings = {};
    var settings = $.extend(settings, {
        "oldHeight":"80",
        "newHeight":"200"
    }, options);
    ...

Test