Question

我有一个例程，使用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％。

任何帮助都将不胜感激......完成后，此脚本将用于开源项目。

Answer 1

添加css规则的有趣之处在于它不会删除它们，所以最好的选择可能就是完全清除style属性。我测试了它，它似乎没有引起任何问题（高度和宽度被添加回来）。

然后再看一下你的脚本后，我尝试了一下优化它。基本上左右代码大多是重复的。如果您检查:animated selector，则不需要swipeBusy变量。以下是我最终的结果：

/*****************************************
***
*** 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);
}

Answer 2

将动画置于单独的功能中。 'remove'类都被正确地更改为'hidden'类，并且随时都有最少数量的文章（在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);
}

清除jquery动画应用的css

2 个答案: