如何调试 jQuery UI 效果不按预期工作

Question

我正在为 shake effect 使用 jQuery UI 库。在我的网站上，它对某些元素按预期工作，但对 d3.js canvas 内的图像元素无效，对于这些图像，它只会导致它们闪烁。我怀疑这可能是因为这些元素上的其他标签或属性，但我不知道如何开始调试这个问题？

我应该使用 JavaScript 调试器，还是尝试禁用这些图像的某些属性？这是一个非常神秘且令人沮丧的错误，我需要一些关于如何修复它的建议。

Answer 1

我会尝试获取信息，在动画期间由 jQuery UI 创建的元素和包装器的样式是什么 - 使用开发人员工具/firebug.

例如运行来自控制台的类似内容（当切换是动画元素的 id 时）：

setInterval(function() { 
    if (jQuery('.ui-effects-wrapper').length > 0) { 
        console.log(jQuery('.ui-effects-wrapper').get(0).style);
        console.log(jQuery('#toggle').get(0).style);
    }
},10);

或者更复杂的 requestAnimationFrame 可能更频繁地转储。

这可能有助于理解发生了什么。

如何调试 jQuery UI 效果不按预期工作

How to debug jQuery UI effect not working as expected

javascript

debugging

jquery

jquery-ui