jQuery没有在所有浏览器中调用

Disclaimer: 我是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_XYZdiv 标记时,它会在其他 div 标记上启动fadeOut和fadeIn调用 .

我按此顺序将我的javascript文件加载到页面中(因此首先加载jQuery):

<script src="http://code.jquery.com/jquery-1.4.4.js"></script>
<script async="" type="text/javascript" src="javascripts/mainsite.js"></script>

非常感谢您给予的任何指导!

回答(4)

2 years ago

在代码运行之前确保DOM已完全加载 .

使用jQuery时执行此操作的常用方法是将代码包装成这样 .

$(function() {
    $("#videoThumbnail_XYZ").click(function () {
      $("#thumbnailDescription_XYZ").fadeOut(300);
      $("#videoPlayer_XYZ").delay(300).fadeIn(100);
      $("#videoHiddenOptions_XYZ").delay(300).fadeIn(100);
    });
});

这是将代码包装在 .ready() 处理程序中的快捷方式,它确保在代码运行之前加载DOM .

如果您没有使用某种方法来确保加载DOM,那么当您尝试选择它时, #videoThumbnail_XYZ 元素可能不存在 .

另一种方法是将您的javascript代码放在您的内容之后,但在结束 </body> 标记内 .

<!DOCTYPE html>
<html>
    <head><title>your title</title></head>
    <body>
        <!-- your other content -->

        <script src="http://code.jquery.com/jquery-1.4.4.js"></script>
        <script async="" type="text/javascript" src="javascripts/mainsite.js"></script>  
    </body>
</html>

2 years ago

如果在渲染_754847之前包含 mainsite.js ,那可能会导致浏览器循环播放 . 尝试围绕 click 处理程序设置包装:

$(document).ready(function(){
// your function here
});

这将确保在DOM准备好之前不会运行 .

此外,您可以考虑将fadeIn调用放入fadeOut的回调函数中,因此如果您决定稍后更改持续时间,则只需在一个位置更改它 .

看起来像这样:

$("#thumbnailDescription_XYZ").fadeOut(300,function(){
  $("#videoPlayer_XYZ").fadeIn(100);
  $("#videoHiddenOptions_XYZ").fadeIn(100);
});

2 years ago

我看到你有一个延迟设置为你的fadeOut相同的持续时间,我建议而不是延迟实质上你等待动画完成,而不是你使用回调函数 .

$("#videoThumbnail_XYZ").click(function () {
  $("#thumbnailDescription_XYZ").fadeOut(300, function() {
      $("#videoPlayer_XYZ").fadeIn(100);
      $("#videoHiddenOptions_XYZ").fadeIn(100);
  });
});

2 years ago

虽然JavaScript在呈现页面时提供了用于执行代码的加载事件,但在完全接收到所有资产(如图像)之前,不会触发此事件 . 在大多数情况下,只要完全构造DOM层次结构,就可以运行脚本 . 传递给 .ready() 的处理程序保证在 DOM is ready 之后执行,因此这通常是附加所有其他事件处理程序并运行其他jQuery代码的最佳位置 .

$(document).ready(function(){
    $("#videoThumbnail_XYZ").click(function () {
        $("#thumbnailDescription_XYZ").fadeOut(300);
        $("#videoPlayer_XYZ").delay(300).fadeIn(100);
        $("#videoHiddenOptions_XYZ").delay(300).fadeIn(100);
    });
});

以下所有三种语法都是等效的:

* $(document).ready(handler)
* $().ready(handler) (this is not recommended)
* $(handler)