Question

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

我正在使用addClass方法，它第一次触发链接以将页面动态加载到div中。当触发另一个链接时，页面加载而没有转换。我认为我需要使用removeClass方法，但这可以防止转换根本不会触发。我试过各种方法来使用这两个类，但是每次链接都没有时我就无法工作。

有什么想法我错了/错过了吗？

编辑对于那些不符合CSS子类的人：

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

$("p").addClass("myClass yourClass");

Taken from the jQuery Docs

日Thnx。

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

function loadBody(target, gotoURL)
{
    $('#' + target)
    .addClass('slide out')
    .load(gotoURL, function (response)
    {
        iniScroll('scrollBody', 'bodyScrollContainer');
    })
    .addClass('slide in')
    removeSlideClass();//WITHOUT THIS, IT FIRES ONLY THE FIRST USE!!
};

function removeSlideClass()
{
    $('#bodyContent').removeClass('slide in');
    $('#bodyContent').removeClass('slide out');
};

如果我在下面写出代码，那么它的工作方式完全相同（jQuery 101）;

function loadBody(target, gotoURL)
{
    $('#' + target).addClass('slide out');
    $('#' + target).load(gotoURL, function (response)
    {
        iniScroll('scrollBody', 'bodyScrollContainer');
    });
    $('#' + target).addClass('slide in');
    $('#' + target).removeSlideClass();
};

function removeSlideClass()
{
    $('#bodyContent').removeClass('slide in');
    $('#bodyContent').removeClass('slide out');
};

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;
}

Answer 1

我明白了：

将.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');
        });
    });
};

Answer 2

CSS类不应包含任何空格......

即：

滑出，应该滑出，或者slide_out或slideOut

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

addClass removeClass w / jQuery for Animations

2 个答案: