清除jquery动画应用的css

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没有被删除，“删除”类也没有被删除。该功能是通过单击左侧和右侧的面板来浏览站点来驱动的，短时间内多次单击似乎会混淆脚本的行为。

您可以访问该网站：http://straathof.acadnet.ca/reblend50.4 (抱歉，该脚本是狗的早餐）并且有一个控制台日志来指示正在发生的事情和地点。第二个脚本可以在 http://straathof.acadnet.ca/reblend50.5 中

查看过去曾尝试只限制一种动画，但使用它的人不喜欢强制暂停。而在ipad上，由于可以快速左右点击，有时会因为可见页面的right:100%或left:100%而得到不可见的页面。

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

Answer 1

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

然后，在仔细查看了您的脚本后，我尝试对其进行了一些优化。基本上左右代码大部分都是重复的。如果您检查 ，则实际上并不需要 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

将动画放在单独的函数中是有效的。 “删除”类全部正确更改为“隐藏”类，并且任何时候都存在最小数量的文章（在 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);
}