Question

编辑：我相信我已经回答了我的问题，但由于我声名狼借，所以在发布后很快就无法回答我自己的问题。我会尽可能地回答这个问题。

我是一名相对经验丰富的程序员，但我是JavaScript / jQuery的新手。我一直在寻找，我似乎无法找到与我的问题有关的任何内容所以我想我会发帖子。无论如何，我有一个JavaScript函数，它接收菜单和项目。该项目是与'$content'中将根据菜单选项切换或切换的内容组相对应的数字，该菜单选项也是与'$menuOpt'中的菜单选项对应的数字。当我切换一个面板时，我有一个'rollOut'动画，可以滚动面板，还有一个'rollIn'动画，可以滚动新的内容面板。所有面板都有一个默认显示：none和'show'类被添加到将要显示的那个。

prevItem指的是当前显示的面板。 itemToShow指的是即将展出的面板。

当我想推出prevItem面板时，我将'rollOut'类添加到prevItem然后删除'contentShow'类，这样它将返回到默认显示：none，因此它不会干扰页面的布局。然后我将'contentShow'类添加到itemToShow，然后添加'rollIn'类，使其转换到屏幕上。

我的问题是这样的：当我将'rollOut'类添加到prevItem时，它没有按照我的意图推出然后消失，它只是在没有动画运行的情况下消失。我认为这是因为'contentShow'类在'rollOut'类添加到prevItem面板之前被删除了。注释掉的return语句用于测试目的。如果没有注释掉该返回，则“rollOut'类已正确应用并正常工作。

    $content.removeClass('rollOut');
    $content.eq(prevItem).addClass('rollOut');
    //return;
    $content.eq(prevItem).removeClass('rollIn');
    $content.eq(prevItem).removeClass('contentShow');
    $content.eq(itemToShow).addClass('contentShow');
    $content.eq(itemToShow).addClass('rollIn');
    $content.eq(itemToShow).removeClass('rollOut');

    prevItem = item;

};

我做了一些编辑，希望能澄清这个问题。

Answer 1

我已经回答了我自己的问题。问题是在删除允许显示该元素的类之前，css动画没有完成。

Answer 2

与您（合理地）期望它的方式相比，这听起来像控制台的工作方式有问题。

console.log在其实现中非常特定于浏览器。例如，IE8总是将其参数转换为字符串，这使得调试其他任何东西变得非常困难。

然而，Chrome可能非常聪明......同时非常愚蠢。我相信Firefox是一样的。

当你console.log一个元素时，你实际上获得了元素本身，作为一个活的“东西”，你可以看到它更新。这尤其意味着即使代码执行，类名也会改变。

请尝试使用console.log($content.eq(prevItem).attr("class"))，看看是否记录了正确的类。

jQuery removeClass乱序执行

2 个答案: