首页 文章

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

提问于
浏览 次
4

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_XYZ 的 div 标记时，它会在其他 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>

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

javascript jquery jquery-ui fadein fadeout

4 回答

  • 3

    在代码运行之前确保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>
    回复于
  • 1

    如果在渲染_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);
});
    回复于
  • 1

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

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

    虽然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)
    回复于

相关问题