Пользовательский скрипт Jquery Slide-to-div, который будет использоваться вместе с аккордеоном, работает не совсем корректно - PullRequest
Новая
       40

Пользовательский скрипт Jquery Slide-to-div, который будет использоваться вместе с аккордеоном, работает не совсем корректно

1 голос
/ 13 февраля 2011

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

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

Вот как выглядит моя текущая разметка:

HTML 

<div id="locate_artist_01"><!-- Unique ID assigned to each artist wrapper -->
   <div class="artist_leadimg">
     <h3 class="artist_bandname">ARTIST NAME</h3><!-- Band Name -->
     <div class="artist_toggle_trigger" id="artist_01" title="Show/Hide"></div><!-- Toggle Button -->
</div><!-- .artist_leadimg -->

   <div class="artist_toggle_container"></div>
</div>

<!-- ....repeated for each artist, but with different unique ID's -->

JQUERY - Аккордеон 

$(document).ready(function(){

    //Hide (Collapse) the toggle containers on load
    $('.artist_toggle_container').hide(); 

    //On Click
    $('.artist_toggle_trigger').click(function(){
        if( $(this).parent().next().is(':hidden') ) { //If immediate next container is closed...
            $('.artist_toggle_trigger').removeClass('artist_toggle_active').parent().next().slideUp(); //Remove all "active" state and slide up the immediate next container
            $(this).toggleClass('artist_toggle_active').parent().next().slideDown(); //Add "active" state to clicked trigger and slide down the immediate next container
        }
        return false; //Prevent the browser jump to the link anchor
    });

});

JQUERY - Слайд для артиста - ЭТО ЧАСТЬ, ЧТО МНЕ НУЖНА ПОМОЩЬ С ПОЖАЛУЙСТАМ 

$(document).ready(function(){

    $('#artist_01').click(function(){
        $('html, body').animate({
            scrollTop: $("#locate_artist_01").offset().top
        }, "slow");
    });

    $('#artist_02').click(function(){
        $('html, body').animate({
            scrollTop: $("#locate_artist_02").offset().top
        }, "slow");
    });

    $('#artist_03').click(function(){
        $('html, body').animate({
            scrollTop: $("#locate_artist_03").offset().top
        }, "slow");
    });

    $('#artist_04').click(function(){
        $('html, body').animate({
            scrollTop: $("#locate_artist_04").offset().top
        }, "slow");
    });

    $('#artist_05').click(function(){
        $('html, body').animate({
            scrollTop: $("#locate_artist_05").offset().top
        }, "slow");
    });

});

Я надеюсь, что кто-то может указать мне правильное направление, потому что я очень близок к тому, чтобы заставить это работать правильно, но я просто еще недостаточно знаю java / jquery, чтобы понять, чего мне не хватает ...

Заранее спасибо за помощь.

1 Ответ

0 голосов
/ 13 февраля 2011

Хорошо, сразу две вещи.

  1. Смещение вершины изменяется по мере того, как аккордеон расширяется и складывается, поэтому верх не работает правильно.Поэтому лучшим решением было бы сохранить все эти позиции, поскольку они не меняются, и использовать эти цифры
  2. Вторая проблема заключается в том, что опера портит анимацию $('html, body').Фактически он оживляет и то, и другое, так что страница выглядит так, как будто она перематывается.Есть хороший пост в блоге о том, как обойти это здесь , но я включил его в код ниже.

Так что удалите весь свой слайд с кодом исполнителя(нет необходимости повторять это для каждого художника) и попробуйте это: 

$(document).ready(function(){
    var artists = $('.artist_toggle_trigger'),
        tops = artists.map(function(i){
            // save trigger parent div position in an array
            return $(this).parent().position().top;
        }).get(),

        // Opera scrolling fix - http://www.zachstronaut.com/posts/2009/01/18/jquery-smooth-scroll-bugs.html
        scrollElement = 'html, body',
        scrollObject;
    $('html, body').each(function(){
        var initScrollTop = $(this).attr('scrollTop');
        $(this).attr('scrollTop', initScrollTop + 1);
        if ($(this).attr('scrollTop') === initScrollTop + 1) {
            scrollElement = this.nodeName.toLowerCase();
            $(this).attr('scrollTop', initScrollTop);
            return false;
        }
    });
    scrollObject = $(scrollElement);

    // Scroll artist block to top
    artists.click(function(){
        scrollObject.animate({
            scrollTop: tops[ artists.index($(this)) ]
        }, "slow");
    });
});
...