jQuery 未在所有浏览器中被调用
免责声明：我是 jQuery 新手。
我正在尝试在 jQuery 中为 div 块实现 fadeOut 效果，然后在另外两个 div 块上实现 fadeIn 效果。
然而，这些效果仅在 Chrome 浏览器中起作用（即它们在 Safari、FireFox、Opera 中不起作用），这让我感到相当困惑。我曾尝试清除缓存，以防它存储旧文件，但这些似乎都没有任何作用。
基本思想（存储在 mainsite.js 文件中）：
$("#videoThumbnail_XYZ").click(function () {
$("#thumbnailDescription_XYZ").fadeOut(300);
$("#videoPlayer_XYZ").delay(300).fadeIn(100);
$("#videoHiddenOptions_XYZ").delay(300).fadeIn(100);
});
因此，当单击 id 为 videoThumbnail_XYZ 的 div 标签时，它会启动 fadeOut 并fadeIn 调用其他 div 标记。
我按此顺序将 javascript 文件加载到页面中（因此首先加载 jQuery）：
<script src="http://code.jquery.com/jquery-1.4.4.js"></script>
<script async="" type="text/javascript" src="javascripts/mainsite.js"></script>
非常感谢您提供的任何指导！
Disclaimer: I am new to jQuery.
I am trying to implement a fadeOut effect in jQuery for a div block, and then fadeIn effect on two other div blocks.
However, these effects are only working in the Chrome browser (i.e. they won't work in Safari, FireFox, Opera) which is rather perplexing to me. I have tried clearing my cache in case it was storing an old file, but none of that seemed to do anything.
Basic idea (stored in mainsite.js file):
$("#videoThumbnail_XYZ").click(function () {
$("#thumbnailDescription_XYZ").fadeOut(300);
$("#videoPlayer_XYZ").delay(300).fadeIn(100);
$("#videoHiddenOptions_XYZ").delay(300).fadeIn(100);
});
So when a div tag with the id of videoThumbnail_XYZ is clicked, it starts the fadeOut and fadeIn calls on the other div tags.
I am loading my javascript files into the page in this order (so jQuery is loaded first):
<script src="http://code.jquery.com/jquery-1.4.4.js"></script>
<script async="" type="text/javascript" src="javascripts/mainsite.js"></script>
Any guidance you could give is greatly appreciated!
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（4）
确保在代码运行之前 DOM 已完全加载。
使用 jQuery 时执行此操作的常见方法是像这样包装代码。
这是将代码包装在
.ready()处理程序中的快捷方式，确保在代码运行之前加载 DOM。如果您不使用某些方法来确保加载 DOM，则当您尝试选择
#videoThumbnail_XYZ元素时，该元素可能不存在。另一种方法是将 javascript 代码放置在内容之后，但位于结束
标记内。Make sure the DOM is fully loaded before your code runs.
A common way of doing this when using jQuery is to wrap your code like this.
This is a shortcut for wrapping your code in a
.ready()handler, which ensure that the DOM is loaded before your code runs.If you don't use some means of ensuring that the DOM is loaded, then the
#videoThumbnail_XYZelement may not exist when you try to select it.Another approach would be to place your javascript code after your content, but inside the closing
</body>tag.如果在呈现
div之前包含mainsite.js，则可能会使浏览器陷入循环。尝试将其包装在您的click处理程序设置中：这将确保在 DOM 准备就绪之前不会运行。
另外，您可能会考虑将 fadeIn 调用放入 fadeOut 的回调函数中，因此，如果您决定稍后更改持续时间，则只需在一处更改即可。
看起来是这样的：
If
mainsite.jsis being included before yourdivis rendered, that might be throwing the browsers for a loop. Try wrapping this around yourclickhandler setup:That'll make sure that isn't run before the DOM is ready.
Also, you might consider putting the fadeIn calls in the callback function of your fadeOut, so if you decide to change the duration later on, you only have to change it in one place.
The way that'd look is like this:
我看到您将延迟设置为与淡出相同的持续时间，我建议您不要延迟，本质上是等待动画完成，而是使用回调函数。
I see you have a delay set to the same duration your fadeOut is, I would recommend instead of delaying which in essence your waiting for the animation to complete that instead you use the callback function.
虽然 JavaScript 提供了在渲染页面时执行代码的 load 事件，但只有在完全接收到所有资源（例如图像）后，才会触发该事件。在大多数情况下，一旦 DOM 层次结构完全构建完毕，脚本就可以运行。传递给
.ready()的处理程序保证在 DOM 准备就绪后执行，因此这通常是附加所有其他事件处理程序并运行其他 jQuery 的最佳位置代码。以下所有三种语法都是等效的：
While JavaScript provides the load event for executing code when a page is rendered, this event does not get triggered until all assets such as images have been completely received. In most cases, the script can be run as soon as the DOM hierarchy has been fully constructed. The handler passed to
.ready()is guaranteed to be executed after the DOM is ready, so this is usually the best place to attach all other event handlers and run other jQuery code.All three of the following syntaxes are equivalent: