Можно ли сделать этот код анимации jQuery более элегантным?

Question

довольно плохо знаком с jQuery, и я придумала некоторый анимационный код, который работает, но выглядит очень некрасиво.

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);
                });
            });
        });
    });

}

Меня особенно беспокоит функция щелчка, которая останавливает анимацию, мне это кажется немного странным. Я попытался вызвать .stop () для класса, который был назначен всем div-элементам, которые были анимированы, но, похоже, это не сработало (без ошибок).

Я тоже пробовал:

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

но это работало только в том случае, если щелчок произошел во время затухания, а не задержки.

Answer 1

Вы можете использовать старты с селектором ^= ^DOCS , чтобы получить список элементов, которые начинаются с ваших идентификаторов.Затем вы можете использовать цикл for и метод .eq() ^DOCS , чтобы получить отдельные элементы в списке и соответствующим образом выполнить их анимацию.1014 * Вот пример следующего:

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);
    }
}

Answer 2

Добавить класс в "search_text_?" элементы и "free_search_help_?" элементы и использовать класс «stop (true, true) .hide ()».

или используйте:

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

или

Я бы убрал и оптимизировал код, сначала назначив переменные соответствующим элементам, а затем используя эти переменные, вместо этого получая jQuery для определения местоположения элементов каждый раз. например, * +1008 *

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....

С уважением Neil

Answer 3

Разве вы не можете добавить класс к своим поисковым элементам?Это было бы наверняка самым элегантным решением!Затем вы должны сделать это:

$ ("# searchBox"). Click (function () {$ ('. Search_text'). Stop (true, true) .hide (); $ ('. Free_search_help)') .stop (true, true) .hide ();});