jQuery回调以不寻常的顺序发生（主要在Chromium / chrome中）

Question

这同样是“这实际上应该如何运作？” 查询，因为它“为什么地狱不起作用？” 查询。

我正在使用jQuery animate（）在我的页面上增长和缩小div。 我有一个函数，通过检查元素是否具有“更大”类，并有条件地增长或缩小它，在两个状态之间切换。 像这样：

function toggleBox(thisBox)
{
   if($("#" + thisBox).hasClass('bigger'))  // Shrink it if it's big
   {
      $("#" + thisBox).animate({ height: '44px'},500).removeClass("bigger");
   }
   else // grow it
   {
      $("#" + thisBox).addClass("bigger").animate({ height: '40%' },500);
   }
}

这绝对是极好的，有一个小问题。 我正在使用CSS为某些元素提供垂直滚动条，当且仅当它们具有“.bigger”类时。 这会导致某些元素出现问题，因为它们具有相对宽度的子对象，一旦垂直滚动条就位，所有浏览器都不会重新渲染（在这种情况下，Chrome / Chromium似乎是主要的攻击者）。

为了在调用上述函数时强制子对象调整大小，我尝试了以下火腿解决方案：

function toggleBox(thisBox)
{
   if($("#" + thisBox).hasClass('bigger')) // Shrink it if it's big
   {
      $("#" + thisBox).animate({ height: '44px'},500).removeClass("bigger");
   }
   else // grow it
   {
      $("#" + thisBox).addClass("bigger").animate({ height: '40%' },500, 'swing', function()
      {
            $(".rerender").each(function()
            {
               this.className = this.className;
               // Or something similar; I've tried a few methods

               console.log(this.className);   // Just to check
            });
      });
   }
}

因此，一旦其父div重新调整大小，我需要重新渲染它只需要“.rerender”类，它将重新处理所有CSS属性。

这有两个问题：第一个是我在回调中用来改变CSS的任何东西，无论是jQuery还是vanilla javascript，似乎都与调用它的函数同时运行，但回调中的其他脚本内容运行当调用函数完成时，就像它应该的那样。 例如，在上面的脚本中，我在回调中放置的任何内容都已经在.animate（）完成时发生了，但是在.animate（）之前，console.log（）没有完成。完了。 即使我从console.log（）调用受CSS影响的代码，也会发生这种情况！

第二个问题是我用来强制对象重新渲染（删除和重新添加类，甚至直接将CSS属性更改为不同的值）的任何单个事件实际上并不会导致对象重新渲染。 如果我做了类似$('#theObject').removeClass('theClass').addClass('theClass');东西$('#theObject').removeClass('theClass').addClass('theClass');
甚至

function()
{
   $('#theObject').removeClass('theClass');
   $('#theObject').addClass('theClass');
}

如果它们被同一事件调用，它不会强制对象重新渲染。 如果它们被单独的事件调用，那就确实如此。

实际上，我想要一种方法来获取页面元素作为回调的一部分重新呈现，并且实际上在调用函数结束后运行。 在好奇心方面，我很想知道为什么（a）上述回调中的代码在它应该运行之前运行，以及（b）为什么两个相反的CSS影响事件似乎根本不运行如果它们是从相同的事件中调用，如果有办法解决这个问题。

Answer 1

您可能想看看这个问题 。 在更改类时，jQuery没有内置任何触发事件的内容。

问问自己：什么是底层动作（例如鼠标点击，悬停，页面加载）应该触发改变div的大小？ 将动画代码绑定到该事件。 然后，在动画的回调中，相应地更改类。