Javascript addClass removeClass w/jQuery用于动画

我正在使用jQuery使用CSS实现我自己的滑动页面转换，并存在以下问题：

我使用的是addClass方法，它在第一次启动链接时就可以工作，以便将页面动态加载到div中。当启动另一个链接时，页面将在不进行转换的情况下加载。我认为我需要使用removeClass方法，但这可以防止转换根本不触发。我尝试了使用这两个类的各种方法，但我不能让它在每次链接被激活时都起作用

你知道我错了/错过了什么吗

为那些不了解CSS子类的人编辑：

一次可以添加多个类，以空格分隔，以 匹配元素的集合，如下所示：

thnx

如果我像下面所说的那样编写代码，它的工作原理完全相同（jquery101）

CSS：

.out, .in {
    -webkit-animation-timing-function: ease-out;
    -webkit-animation-duration: 650ms;
}
.slide.out {
    -webkit-transform: translateX(-100%);
    -webkit-animation-name: slideouttoleft;
}

.slide.in {
    -webkit-transform: translateX(0);
    -webkit-animation-name: slideinfromright;
}

---

CSS类不应包含任何空格

即：

滑出，应该是滑出，或滑出或滑出

---

尝试删除空格并修复css中的类以匹配。

css类不应包含任何空格

即：

滑出，应该是滑出，或滑出或滑出

尝试删除css中的空格并修复类以匹配。

我发现：

将

.addClass（'slide out'）

方法与

webkitAnimationEnd

事件绑定，后跟return语句，在第一个转换完成时触发第二个转换。激发此事件时，它将从原始页面中删除所有类。记住解除绑定

webkitAnimationEnd

事件会阻止向新页面添加额外的处理程序，以便在需要时重新启动该过程。因此，不需要jQuery的

removeClass（）

方法

新的页面转换方法

/* --------------- Handle Page Body Loading ----------------- */

function loadBody(target, gotoURL)
{
    $('#' + target)
    .addClass('slide out')
    .bind('webkitAnimationEnd', function(){
        $(this).load(gotoURL, function (e)
        {
            iniScroll('scrollBody', 'bodyScrollContainer');
            $('#' + target)
            .toggleClass('slide in')
            .unbind('webkitAnimationEnd');
        });
    });
};

我想出来了：

将

.addClass（'slide out'）

方法与

webkitAnimationEnd

事件绑定，后跟return语句，在第一个转换完成时触发第二个转换。激发此事件时，它将从原始页面中删除所有类。记住解除绑定

webkitAnimationEnd

事件会阻止向新页面添加额外的处理程序，以便在需要时重新启动该过程。因此，不需要jQuery的

removeClass（）

方法

新的页面转换方法

/* --------------- Handle Page Body Loading ----------------- */

function loadBody(target, gotoURL)
{
    $('#' + target)
    .addClass('slide out')
    .bind('webkitAnimationEnd', function(){
        $(this).load(gotoURL, function (e)
        {
            iniScroll('scrollBody', 'bodyScrollContainer');
            $('#' + target)
            .toggleClass('slide in')
            .unbind('webkitAnimationEnd');
        });
    });
};

---

$（'#'+target）

自己在那里做什么。似乎是语法错误或键入错误。在每次*类调用中，您都在操作2个类，而不仅仅是一个

class=“slide-in”

既有类

幻灯片

又有

in

，不要与

幻灯片

之类的东西混淆。你应该把你的全部代码放在一个文件夹中，我有一点怀疑你犯了很多其他的错误semicolons@elclanrs请参见上面的编辑。Thnx@SpYk3HH种子编辑上面。thnx

$（'#'+target）

自己在那里做什么。似乎是语法错误或键入错误。在每次*类调用中，您都在操作2个类，而不仅仅是一个

class=“slide-in”

既有类

幻灯片

又有

in

，不要与

幻灯片

之类的东西混淆。你应该把你的全部代码放在一个文件夹中，我有一点怀疑你犯了很多其他的错误semicolons@elclanrs请参见上面的编辑。Thnx@SpYk3HH种子编辑上面。Thnxout和in是slide的子类。查看CSS并使用您的真实配置文件。这个方法就是你调用它们的方式-它在应用程序中或任何调用CSS子类的应用程序中无处不在。这是我真正的个人资料。。。如果它是一个子类，那么它在CSS中不应该有空格。例如，slide.out而不是.slide.out.out和in是slide的子类。查看CSS并使用您的真实配置文件。这个方法就是你调用它们的方式-它在应用程序中或任何调用CSS子类的应用程序中无处不在。这是我真正的个人资料。。。如果它是一个子类，那么它在CSS中不应该有空格。滑出，而不是滑出。

.out, .in {
    -webkit-animation-timing-function: ease-out;
    -webkit-animation-duration: 650ms;
}
.slide.out {
    -webkit-transform: translateX(-100%);
    -webkit-animation-name: slideouttoleft;
}

.slide.in {
    -webkit-transform: translateX(0);
    -webkit-animation-name: slideinfromright;
}

/* --------------- Handle Page Body Loading ----------------- */

function loadBody(target, gotoURL)
{
    $('#' + target)
    .addClass('slide out')
    .bind('webkitAnimationEnd', function(){
        $(this).load(gotoURL, function (e)
        {
            iniScroll('scrollBody', 'bodyScrollContainer');
            $('#' + target)
            .toggleClass('slide in')
            .unbind('webkitAnimationEnd');
        });
    });
};