JQuery - как запустить одно событие при задержке другого? - PullRequest
Новая
       4

JQuery - как запустить одно событие при задержке другого?

1 голос
/ 08 января 2012

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

Я до сих пор получил это: HTML: 

<div class="drawer" id="drawer_about"></div>
<div class="drawer" id="drawer_contact"></div>
<div class="drawer" id="drawer_hire"></div>
<div class="drawer" id="drawer_social"></div>

...

<ul class="navigation">
<li><a href="#" class="show_hide_about"><span>About Me</span></a></li>
<li><a href="#" class="show_hide_contact"><span>Get In Touch</span></a></li>
<li><a href="#" class="show_hide_hire"><span>Hire Me</span></a></li>
<li><a href="#" class="show_hide_social"><span>Social Networks</span></a></li>
</ul>

И JQuery: 

$(document).ready(function(){
        $("#drawer_about").hide();
        $("#drawer_contact").hide();
        $("#drawer_hire").hide();
        $("#drawer_social").hide();

        lastBlock = ("#drawer_hire");


    $('.show_hide_about').click(function(){
        $("#drawer_about").slideToggle(700);
        $(lastBlock).hide(700);
        lastBlock = ("#drawer_about");
    });

    $('.show_hide_contact').click(function(){
        $("#drawer_contact").slideToggle(700);
        $(lastBlock).hide(700);
        lastBlock = ("#drawer_contact");
    });

    $('.show_hide_hire').click(function(){
        $("#drawer_hire").slideToggle(700);
        $(lastBlock).hide(700);
        lastBlock = ("#drawer_hire");
    });

    $('.show_hide_social').click(function(){
        $("#drawer_social").slideToggle(700);
        $(lastBlock).hide(700);
        lastBlock = ("#drawer_social");
    });
});

Собираюсь ли я сюда ОТТ? Есть ли более простой способ сделать это?

Основная проблема, с которой я столкнулся, заключается в том, что все это работает, однако, если панель ABOUT ME открыта и пользователь щелкает ссылку HIRE ME, я получаю странный эффект. В этой ситуации я бы хотел, чтобы панель «ОБО МНЕ» складывалась, а затем панель «АРЕНДА МЕНЯ» складывалась.

Надеюсь, это имеет смысл, спасибо, ребята,

Alex

Ответы [ 3 ]

2 голосов
/ 08 января 2012

Я бы настроил ссылки следующим образом: <a href="" class="show" data-section="contact">asdf</a>

Тогда все, что вам нужно, это: 

$('.show').click(function(ev) {
    var $visibleDrawer = $('.drawer:visible').eq(0); // make sure to get only one (or 0) drawer

    // set currentSection to the drawer's id or empty if no drawer was found
    var currentSection = $visibleDrawer.length?$visibleDrawer.attr('id').replace('drawer_',''):'';

    $('.drawer').slideUp(700);
    $('a.show').removeClass('active'); // reset all link classes


    (function(clickedSection, $link){ //<-- pass the active link to have access to it inside the closure
        if(currentSection != clickedSection){
            $link.addClass('active');        // set active class on clicked link
            setTimeout(function() {
                $('#drawer_'+clickedSection).slideDown(700);
            }, ($visibleDrawer.length?700:0)); // set the timeout to 0 if no drawer visible
        }
    })($(this).data('section'),$(this)); //<--

    ev.preventDefault();
});
0 голосов
/ 08 января 2012

Здесь - ссылка на то, как это работает в jsFiddle (обратите внимание, что для jQuery следует выбрать платформу)

Я думаю, что это сработает с вами: 

    $(document).ready(
        function(){
            $('.header').click(function(){
                //To hide all other contents
                $('.content').slideUp('slow');
                var num=$(this).attr('id').split('_')[1];
                //And show this one .. 
                $('#content_'+num).slideDown('slow');
            });

        }
    );

HTML должен выглядеть следующим образом: 

                    <div class="header" id="title_111"><a href="#">Category 1</a></div>
                    <div class="content" id="content_111">

                    </div>

                    <div class="header" id="title_112"><a href="#">Category 2</a></div>
                    <div class="content" id="content_112">

                    </div>

                    <div class="header" id="title_113"><a href="#">Category 3</a></div>
                    <div class="content" id="content_113">

                    </div>

                    <div class="header" id="title_114"><a href="#">Category 4</a></div>
                    <div class="content" id="content_114">

                    </div>

                    <div class="header" id="title_115"><a href="#">Category 5</a></div>
                    <div class="content" id="content_115">

                    </div>

                    <div class="header" id="title_116"><a href="#">Category 6</a></div>
                    <div class="content" id="content_116">

                    </div>
0 голосов
/ 08 января 2012

с помощью .animate () вы можете проанализировать функцию обратного вызова, которая будет выполнена в конце анимации, или вы можете использовать .queue () , чтобы отслеживатьточка исполнения против и элемент.Какой-то псевдокод первого пути 

$('#foo').animate(function() {
    // do stuff with foo
}, duration, easing, function() {
    $('#bar').animate(function() {
         // do stuff with bar
    })
});
...