Question

我正在使用JQuery.load（）将文件内容拉入网页。将其关闭的javascript是在一个单独的.js文件中，以保持整洁。

/* Pulls in file contents */
    $(function() {
    $('.div').load('file.html');
});

但是，当我在jquery动画中提取文件时，我用来交叉淡化图像 - 其代码也在.js文件中 - 不起作用。

/* Crossfade code */
$(function(){
$(".appearing-image img").css("opacity",0).fadeTo(300, 0);
$(".appearing-image img").mouseover(function () {
        $(this).fadeTo(200, 1);
    });
$(".appearing-image img").mouseout(function () {
        $(this).fadeTo(200, 0);
    });
});

我发现让它工作的唯一方法是将它包含在.load（）代码中。

/* Pulls in file contents and executes animation */
$('.div').load('file.html',     $(function(){
            /* Crossfade images */
            $(".appearing-image img").css("opacity",0).fadeTo(300, 0);
            $(".appearing-image img").mouseover(function () {
            $(this).fadeTo(200, 1);
            });
            $(".appearing-image img").mouseout(function () {
            $(this).fadeTo(200, 0);
            });
        });
    });

有效。

然而，在页面的其他地方，其他图像不会交叉淡入淡出，除非代码本身也包含在内，与.load（）分开，这意味着我现在包括代码两次。

无论如何都要避免这种情况吗？

Answer 1

使用外部功能，例如crossfade()

/* Crossfade code */
function crossfade(){
$(".appearing-image img").css("opacity",0).fadeTo(300, 0);
$(".appearing-image img").mouseover(function () {
        $(this).fadeTo(200, 1);
    });
$(".appearing-image img").mouseout(function () {
        $(this).fadeTo(200, 0);
    });
}

/* Pulls in file contents and executes animation */
$('.div').load('file.html', function(){
    /* Crossfade images */
    crossfade();
});

Answer 2

您可以使用

$(window).bind('setup', function() {
   //code
});

在文档准备好之前加载某些内容

使用jquery.load并尝试避免两次包含相同的代码

2 个答案: