Can this jQuery animation code be made more elegant?

fairly new to jQuery, and i have come up with some animation code which works, but it looks very ugly.

function help() {

    $("#searchBox").click(function(){
        $('#search_text_1').stop(true,true).hide();
        $('#search_text_2').stop(true,true).hide();
        $('#search_text_3').stop(true,true).hide();
        $('#search_text_4').stop(true,true).hide();
        $('#search_text_5').stop(true,true).hide();
        $('#free_search_help_1').stop(true,true).hide();
        $('#free_search_help_2').stop(true,true).hide();
        $('#free_search_help_3').stop(true,true).hide();
        $('#free_search_help_4').stop(true,true).hide();
        $('#free_search_help_5').stop(true,开发者_开发知识库true).hide();
  });

    $('#search_text_1').delay(1000).fadeIn(500).delay(4000).fadeOut(500, function() {
        $('#search_text_2').fadeIn(500).delay(4000).fadeOut(500, function() {
            $('#search_text_3').fadeIn(500).delay(4000).fadeOut(500, function() {
                $('#search_text_4').fadeIn(500).delay(4000).fadeOut(500, function() {
                    $('#search_text_5').fadeIn(500);
                });
            });
        });
    });

    $('#free_search_help_1').delay(1000).fadeIn(500).delay(4000).fadeOut(500, function() {
        $('#free_search_help_2').fadeIn(500).delay(4000).fadeOut(500, function() {
            $('#free_search_help_3').fadeIn(500).delay(4000).fadeOut(500, function() {
                $('#free_search_help_4').fadeIn(500).delay(4000).fadeOut(500, function() {
                    $('#free_search_help_5').fadeIn(500);
                });
            });
        });
    });

}

I am particularly concerned with the click function to stop the animations, seems a bit hacky to me. I did try calling .stop() on a class that was assigned to all the divs that were being animated, but this didn't seem to work (no errors).

I also tried:

$("div:animated").stop(true,true);

but this only worked if the click happened during the fades, and not the delays.

You can use the starts with selector ^=^DOCS to get a list of the elements that start with your ids. Then you can use a for loop and the .eq()^DOCS method to get the individual items in the list and conduct their animations accordingly.

Here's an example of the following.

function help() {
    var $st  = $('[id^="search_text_"]'),
        $fsh = $('[id^="free_search_help_"]');

    $("#searchBox").click(function() {
        $st.stop(true, true).hide();
        $fsh.stop(true, true).hide();
    });

    for (var i = 0; i < $st.length; i++) {
        var tDelay = 1000 + 5000*i;
        $st.eq(i).delay(tDelay).fadeIn(500).delay(4000).fadeOut(500);
        $fsh.eq(i).delay(tDelay).fadeIn(500).delay(4000).fadeOut(500);
    }
}

Can you not add a class to your search divs? That would be for sure the most elegant solution! Then you would do this:

$("#searchBox").click(function(){ $('.search_text').stop(true,true).hide(); $('.free_search_help').stop(true,true).hide(); });

Add a class to "search_text_?" elements and the "free_search_help_?" elements and use the class to "stop(true, true).hide()".

or use:

$('div[id^=search_text]'     ).stop(true, true).hide();
$('div[id^=free_search_help]').stop(true, true).hide();

or:

I would tidy up and optimise the code by first assigning variables to the relevant elements and then using those variables, rather getting jQuery to locate the elements each time. e.g.

var $s[6], $f[6], i = 1;

while (i < 6) {
    $s[i  ] = $('#search_text_'      + i);
    $f[i  ] = $('#free_search_help_' + i);
    $f[i  ].stop(true, true) hide();
    $s[i++].stop(true, true).hide();
}

$s[1].delay(....   etc.....
    $s[2].fadeIn(....    etc.....
        $s[3].fadeIn(....    etc.....
            $s[4].fadeIn(....    etc.....
                $s[5].fadeIn(....    etc....

Regards Neil