javascript - jQuery 回调以不寻常的顺序发生(在 Chromium/chrome 中为 moSTLy)

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

这绝对是完美的，只是有一个小问题。当且仅当它们具有“.bigger”类时，我使用 CSS 为某些元素提供垂直滚动条。这会导致某些元素出现问题，因为它们具有相对宽度的子对象，一旦垂直滚动条就位，这些子对象就不会在所有浏览器上重新渲染(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 还是普通 javascript，似乎都与调用它的函数同时运行，但其他脚本内容在回调在调用函数完成时运行，就像它应该的那样。例如，在上面的脚本中，我在回调中放入的用于更改 CSS 的任何内容在 .animate() 完成时都已发生，但 console.log() 直到 .animate() 完成后才完成。完成的。即使我从 console.log() 调用影响 CSS 的代码，也会发生这种情况!

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

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

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

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

Answer 1

您可能想看看this question 。 jQuery 中没有内置任何东西可以在类更改时触发事件。

问问自己:应该触发更改 div 大小的基本操作(例如鼠标单击、悬停、页面加载)是什么？将您的动画代码绑定(bind)到该事件。然后，在动画的回调中，相应地更改类。