CODEWITHSUNDEEP
jquery
Allan Thomas
Allan Thomas

Reputation: 3589

jQuery custom functions and passing parameters to them

I have a row of images, and when one of the images is clicked it expands while also shrinking any other image that may be enlarged. If you click on the enlarged image, it just shrinks itself.

I'm receiving a 'shrink is not defined' error message. Thanks in advance.

        $.fn.grow = function(size,rate) {
            $(this).addClass('click').animate({'height': size}, rate);
        }
        $.fn.shrink = function(size,rate) {
            $('img').removeClass('click').animate({'height': size}, rate);
        }

        $(document).ready(function() {
            $('#gallery img').click(function() {
                var $this = $(this);
                ($this.hasClass('click')) ? $this.shrink('139', '200') : $this.shrink('139', '200').grow('700', '200');
            });
        });

Upvotes: 1

Views: 3210

Answers (2)

kwicher
kwicher

Reputation: 2082

If you use $.fn.extend like that:

$.fn.extend({
    shrink: function() {$(this).doSth()},
    grow: function() {$(this).doSth()}
});

You will be able to apply your shrink and grow methods to any jQuery wrapped object eg

$('img').shrink();

Hope it helps

Upvotes: 0

alex
alex

Reputation: 490263

I received a different exception...

Uncaught TypeError: Cannot call method 'grow' of undefined

You are attempting to chain the methods (or use the cascade if you like Crockfordian terms), but neither of your custom functions returns a jQuery object.

You need to make them return something, generally this. In a jQuery custom function, this is already a jQuery object, so there is no need to wrap it again.

Upvotes: 2

Related Questions