jquery - 清除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);
   }
        }); 

this 的激活并不总是清除这些变量，使得连续访问这个页面很尴尬，因为它有时仍然有 right:100% 的 css 值

我也试过用一个单独的函数来分离它:

$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上，因为你可以快速左右点击，有时你会看到不可见的页面，因为可见页面有right:100% 或 left:100%。

如有任何帮助，我们将不胜感激...完成后，此脚本将用于开源元素。

Answer 1

添加 css 规则的有趣之处在于它不会删除它们，因此您最好的选择可能是完全清除样式属性。我测试了一下，好像没有什么问题(高度和宽度加回来了)。

然后在仔细查看了您的脚本之后，我尝试对其进行了一些优化。基本上左右代码大部分是重复的。如果您检查 :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);
}