JQuery проблема с FadeIn и FadeOut

0

Я пытаюсь создать способ показать и скрыть содержимое внутри divs (на основе класса), когда пользователь нажимает ссылку привязки с определенным идентификатором.

У меня есть индекс AZ букв с привязными ссылками. Когда кто-то нажимает на конкретную ссылку (письмо) javascript hides (fadeOut) ALL divs с указанными конкретными классами. Затем скрипт отображает (fadeIn) div, которым я являюсь.

Проблема в том, что из них 13, и я рассказал о первых 3 ниже, чтобы помочь дать контекст.

То, что происходит, - это некоторые странные моменты времени и задержки при щелчке назад и вперед между буквами. Иногда отображение div сохраняется и не исчезает в течение долгого времени, хотя у меня очень короткий набор времени.

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

Дайте мне знать, если у вас есть какие-либо вопросы, или вам нужно больше деталей и контекста.

$('#letter-a').mousedown(function(){    
    $('.letter-b, .letter-c, .letter-g, .letter-h, .letter-i, .letter-m, .letter-n, .letter-o, .letter-r, .letter-s, .letter-t, .letter-u, .letter-w').fadeOut(100, function(){
        $('.letter-a').delay(600).fadeIn(500);
    });
});

$('#letter-b').mousedown(function(){    
    $('.letter-a, .letter-c, .letter-g, .letter-h, .letter-i, .letter-m, .letter-n, .letter-o, .letter-r, .letter-s, .letter-t, .letter-u, .letter-w').fadeOut(100, function(){
        $('.letter-b').delay(600).fadeIn(500);
    });
});

$('#letter-c').mousedown(function(){    
    $('.letter-a, .letter-b, .letter-g, .letter-h, .letter-i, .letter-m, .letter-n, .letter-o, .letter-r, .letter-s, .letter-t, .letter-u, .letter-w').fadeOut(100, function(){
        $('.letter-c').delay(600).fadeIn(500);
    });
});
  • 0
    Привет, если я правильно понял ваш вопрос, вы хотите сделать аккордеон, а это значит: вы хотите, чтобы один div был виден одновременно. На самом деле это не очень сложно, но я всегда использую плагин, потому что я уверен, что у меня нет ошибок. Попробуйте один из них 1stwebdesigner.com/freebies/jquery-accordion-menus-tutorials
Теги:

3 ответа

3
Лучший ответ

Попробуйте .stop(true, true)

меньшая версия вашего кода

var cls_all = $('[class*="letter-"]'); //cached
$('[id^="letter-"]').mousedown(function () {
    var cls = this.id;
    cls_all.not('.' + cls).stop(true, true).fadeOut(100, function () {
        $('.' + cls).delay(600).stop(true, true).fadeIn(500);
    });
});

^ attribute-starts-with-selector

* attribute-contains-selector/

Поделиться
  • 0
    @PSL Я думал сделать то же самое, но this относится к id^="letter- и OP хотят класс. Они разные, я полагаю.
  • 0
    Да, я понял позже .. Беглому взгляду пришла эта мысль ... :) возможно, вы можете кэшировать $('[class*="letter-"]') снаружи и использовать его также.
Показать ещё 2 комментария
1

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

Попробуйте использовать метод stop() (http://api.jquery.com/stop/):

$('.letter-b, .letter-c, .letter-g, .letter-h, .letter-i, .letter-m, .letter-n, .letter-o, .letter-r, .letter-s, .letter-t, .letter-u, .letter-w').stop().fadeOut(100, function(){
        $('.letter-a').delay(600).fadeIn(500);
    });

Если это не поможет - попробуйте заменить delay() на setTimeout

Поделиться
0

Попробуй это

$('#letter-a').mousedown(function () {
    $('.letter-b, .letter-c, .letter-g, .letter-h, .letter-i, .letter-m, .letter-n, .letter-o, .letter-r, .letter-s, .letter-t, .letter-u, .letter-w').fadeOut(100, function () {
        setTimeout(function () {
            $('.letter-a').fadeIn(500);, 600);
        });
    });

$('#letter-b').mousedown(function () {
    $('.letter-a, .letter-c, .letter-g, .letter-h, .letter-i, .letter-m, .letter-n, .letter-o, .letter-r, .letter-s, .letter-t, .letter-u, .letter-w').fadeOut(100, function () {
        setTimeout(function () {
            $('.letter-b').fadeIn(500);, 600);
        });
    });

$('#letter-c').mousedown(function () {
    $('.letter-a, .letter-b, .letter-g, .letter-h, .letter-i, .letter-m, .letter-n, .letter-o, .letter-r, .letter-s, .letter-t, .letter-u, .letter-w').fadeOut(100, function () {
        $('.letter-c').fadeIn(500);, 600);
    });
});
Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню