Question

I am designing a responsive layout with a carousel. The carousel has a control that allows the user to toggle the entire box, hiding and showing the carousel. You can see this fully working here: http://pixelcakecreative.com/cimlife/responsive2/

It seems like it is functioning very sluggishly. I was thinking that my jquery was written poorly, and it might be slowing the performance down. My jquery is as follows:

$("#closeBox a").click(function(){
            if ($(this).find('span').hasClass('minus')) {
               $(this).find('span').removeClass('minus').addClass('plus');
               $(".padCar").css("padding-bottom","0");

            } else if ($(this).find('span').hasClass('plus')) {
                 $(this).find('span').removeClass('plus').addClass('minus');
                 $(".padCar").css("padding-bottom","20px");
            }
            $('#carousel').slideToggle('slow');

        return false;
        });

Any ideas why it is so jumpy? Perhaps my jquery should be better written, or maybe it is something else on the page that causes this?

Answer 1

Well first off you need to cache your selectors, so you should use

var span = $(this).find('span');

And then just use span.someFunction(); – this reduces DOM queries and will speed it up.

Also what about adding a context to your initial selector? So if you know the links you are targeting are within a div with a class of .myBox, use:

$('#closebox a', '.myBox')

Or even better, use delegate():

$('.myBox').delegate('#closebox a', 'click', function(){ ... });

Update

As John Hartsock and RightSaidFred pointed out, if using v1.7+, you should use on() rather than delegate(), as so:

$('.myBox').on('click', '#closebox a', function(){ ... });