Очистка CSS применяется анимация jquery - PullRequest
Новая
       2

Очистка CSS применяется анимация jquery

0 голосов
/ 21 мая 2011

У меня есть процедура для перемещения элементов (страниц журнала) с помощью анимации jquery: 

$this.animate({right:"100%"},1200,'easeOutBounce',function(){
   $this.addClass('hidden').removeClass('remove');
   var t = setTimeout( "$this.css( 'left','' ).css( 'right','' ).removeClass( 'remove' )",1200);
   }
        });

Активация этого не всегда очищает эти переменные, делая последовательные посещения этой страницы неловкими, потому что иногда она все еще имеет значение css: 100%

Я также пытался отделить его с помощью отдельной функции: 

$this.animate({right:"100%"},1000,'easeOutBounce',function(){
                        doneShuffling($this);
                        })

function doneShuffling(element) {
   element.removeClass('remove').addClass('hidden').css('left','').css('right','');
}

Проблема, с которой я сталкиваюсь, заключается в том, что css не удаляется, как и класс «remove». Эта функция запускается нажатием на панель слева и справа для перехода по сайту, и несколько кликов за короткое время, похоже, сбивают с толку поведение скрипта.

Вы можете посетить сайт здесь: http://straathof.acadnet.ca/reblend50.4 (извините, сценарий - это собачий завтрак), и на месте есть консольный журнал, чтобы указать, что происходит и где. Второй сценарий можно увидеть на http://straathof.acadnet.ca/reblend50.5

В прошлом я пытался ограничить только одну анимацию, но людям, использующим ее, не нравятся вынужденные паузы. А на ipad, поскольку вы можете быстро щелкнуть влево и вправо, иногда появляются невидимые страницы, поскольку видимые страницы имеют право: 100% или слева: 100%.

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

Ответы [ 2 ]

0 голосов
/ 24 мая 2011

Размещение анимации в отдельной функции сработало. Классы «remove» все должным образом заменены на «скрытые» классы, и в любое время присутствует минимальное количество статей (важно на устройствах ios, поскольку каждому видимому элементу требуется память.) 

/*****************************************
***
*** Check for NewPageSides with newpage and direction
***
******************************************/
function newPageSides(newPage, dir){ // dir true = right, false = left
    $remover =  $('.article-wrapper:eq(' + currentPage + ')');
    if (!$remover.is(':animated')){
        prevPage = currentPage;
        $remover.attr('style','').removeClass('remove');
        if (newPage>0) {
            currentPage = newPage;
        } else {
            currentPage = prevPage + (dir ? 1 : -1);
        }
        if (currentPage > maxPage){
            currentPage = maxPage;
        } else if (currentPage < 0){
            currentPage = 0;
        } else {
            $adder = $('.article-wrapper:eq(' + currentPage + ')');
            $adder.removeClass('hidden').addClass('active').attr('style','');
            $remover =  $('.article-wrapper:eq(' + prevPage + ')');
            $remover.addClass('remove').removeClass('active');
            d = (dir) ? { right:'100%' } : { left:'100%' };

            animateSlide($remover)
        }
        newPage = 0;
        $('.active').removeClass('hidden');
        //$('.remove').removeClass('remove').addClass('hidden');
    }
}

/*****************************************
***
*** Animate tht puppy!
***
******************************************/

function animateSlide(currentSlide){
    currentSlide.animate(d, 1200, 'easeOutBounce',function(){

                currentSlide
                    .addClass('hidden')
                    .attr('style', '')
                    .removeClass('remove');
            });
}

/*****************************************
***
*** New Page is on the left - used only for non webkit
***
******************************************/

function newPageLeft(newPage){
    newPageSides(newPage, false);
}

/*****************************************
***
*** New Page is on the Right - used only for non webkit
***
******************************************/

function newPageRight(newPage){
    newPageSides(newPage, true);
}
0 голосов
/ 21 мая 2011

Самое смешное в добавлении правил css в том, что они не будут удалены, поэтому лучше всего было бы просто полностью убрать атрибут style.Я протестировал его, и, похоже, он не вызывал никаких проблем (высота и ширина добавляются обратно).

Затем, посмотрев немного на ваш скрипт, я попытался немного его оптимизировать.В основном левый и правый код в основном повторяется.И переменная swipeBusy на самом деле не нужна, если вы проверите селектор :animated .Вот что я закончил: 

/*****************************************
***
*** New Page is on the left - used only for non webkit
***
******************************************/

function newPageSides(newPage, dir){ // dir true = right, false = left
    $remover =  $('.article-wrapper:eq(' + currentPage + ')');
    if (!$remover.is(':animated')){
        prevPage = currentPage;
        $remover.attr('style','').removeClass('remove');
        if (newPage>0) {
            currentPage = newPage;
        } else {
            currentPage = prevPage + (dir ? 1 : -1);
        }
        if (currentPage > maxPage){
            currentPage = maxPage;
        } else if (currentPage < 0){
            currentPage = 0;
        } else {
            $adder = $('.article-wrapper:eq(' + currentPage + ')');
            $adder.removeClass('hidden').addClass('active').attr('style','');
            $remover =  $('.article-wrapper:eq(' + prevPage + ')');
            $remover.addClass('remove').removeClass('active');
            d = (dir) ? { right:'100%' } : { left:'100%' };
            $remover.animate(d, 1200, 'easeOutBounce',function(){
                $remover
                    .addClass('hidden')
                    .attr('style', '')
                    .removeClass('remove');
            });
        }
        newPage = 0;
        $('.active').removeClass('hidden');
    }
}

function newPageLeft(newPage){
    newPageSides(newPage, false);
}

/*****************************************
***
*** New Page is on the Right - used only for non webkit
***
******************************************/

function newPageRight(newPage){
    newPageSides(newPage, true);
}
...