'iPlayer компании' Стиль содержимого аккордеон/слайдер


Мне было интересно, если кто-то может взглянуть на это Би-би-си iPlayer от стиля контента аккордеон/слайдер я только что сделал, и помочь мне заставить его работать правильно? Я не эксперт в jQuery и я уверен, что я не сделал это правильно, или если есть более эффективные способы сделать это.

Проблема, как представляется, нажав. Иногда требуется два клика, и скольжение содержимого левой панели, кажется, изменить размер при анимации.

Вот весь код.

Фрагмент из jsfiddle:

$('#accordion > li.bg1 .heading').toggle(
    function () {
        $('#accordion > li.bg2').stop().animate({'width':'718px'},1000);
        $('#accordion > li.bg1').stop().animate({'width':'50px'},1000);
        $('#accordion > li.bg1 .heading').stop(true,true).fadeOut(1000);
        $('#accordion > li.bg1 .heading-side').stop(true,true).fadeIn(2000);
        $('a.see-more-p').css('display','none');
     },
    function () {
        $('#accordion > li.bg1').stop().animate({'width':'374px'},1000);
        $('#accordion > li.bg2').stop().animate({'width':'394px'},1000);
        $('#accordion > li.bg1 .heading-side').stop(true,true).fadeOut(1000);
        $('#accordion > li.bg1 .heading').stop(true,true).fadeIn(2000);    
        $('a.see-more-p').css('display','block');
    }
 ); 
$('#accordion > li.bg2 .heading, a.see-more-p').toggle(
    // same as above
);
$('#accordion > li.bg1 .heading-side').toggle(
    // same as above
); 


740
4
задан 7 июля 2011 в 11:07 Источник Поделиться
Комментарии
1 ответ

Я обычно предлагаю тебе пост на сайте StackOverflow , как это безразлично 'Т работать должным образом.

Во-первых:


  1. У вас же две функции повторяются снова и снова .... нет. Ставить их в один большой селектор.

    $('#accordion > li.bg1 .heading, #accordion > li.bg2 .heading, a.see-more-p, #accordion > li.bg1 .heading-side').toggle

  2. У вас есть два заголовка для каждого. Семантически это неверно. изменить вашу .направляясь на стороне , чтобы .заголовком.стороны. тогда все что вам нужно-это добавление('сторона'); и removeClass('сторона');
    также вам понадобятся:

    ul.accordion li .heading.side .right{ display: none; }

    чтобы скрыть >.
    Чтобы получить fadeIn/выход:

    .fadeOut(500).queue(function(next) {
    $(this).addClass("side");
    next();
    }).fadeIn(500);

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


  3. Тумблер переключает только на этом конкретном контексте (т. е. элемент был выбран) , поэтому она будет переключать для каждого элемента, отсюда и двойные clickyness.
    Мое решение свернуть свой собственный переключения:

    $(function() {
    var first = true;
    $('#accordion > li.bg1 .heading, #accordion > li.bg2 .heading, a.see-more-p, #accordion > li.bg1 .heading-side')
    .click(function() {
    if (first) {
    //do first stuff
    }else{
    // do second stuff
    }
    first = !first; // < --- Toggling done here!!!!
    });
    });

Виола! увидеть jsFiddle для моей крутости!

3
ответ дан 21 сентября 2011 в 04:09 Источник Поделиться