JQuery：你能在.load中添加过渡效果吗答案

【问题标题】：JQuery:Can you add transition effects to .loadJQuery：你能在.load中添加过渡效果吗
【发布时间】：2011-06-20 05:02:56
【问题描述】：

我的工作进展缓慢，不断尝试不同的方法。

快速提问...

是否可以将 .fadein .fadeout .slideup .slidedown 等 jquery 动画效果添加到 onclick .load 中。

当我点击一个链接时，页面只是在我指定的区域加载，但我不知道如何将效果绑定到这个 .load。

有什么建议吗？

编辑：代码示例：

$(document).ready(function(){ 
    // load home page when the page loads
    $("#main_content_inner").load("home.html");

    $("#page1").click(function(){
        // load page1 in main_content_inner on click
        $("#main_content_inner").load("page1.html");
    });
    $("#page2").click(function(){
        // load page2 in main_content_inner on click
        $("#main_content_inner").load("page2.html");
    });
    $("#page3").click(function(){
        // load page3 in main_content_inner on click
        $("#content").load("page3.html");
    });
});

编辑：HTML 文件的片段：

//页面应该显示在哪里

    <div id="main_content_inner">
        <h1>
            Main Content
        </h1>
    </div>

//用户选择页面的侧边栏菜单

            <ul id="sidebar_menu">

            <p><li id="page1"> page1</li></p>

            <p><li id="page2"> page2</li></p>

            <p><li id="page3"> page3</li></p>

          </ul>

此代码当前在我的主页上的指定 div 中加载 html 文档。我想这样做，但有一个过渡。

我选择加载整个 html 文档而不是从文档中加载特定内容，因为我发现当我在文档的特定内容中包含 javascript 时，然后尝试将其加载到我的主页上，即 javascript（正在 twitter推文）不会显示。但是当我单独打开 html 文件时它会正常工作，所以似乎 ajax 会将 javascript 加载到我在主页上的内容 div 中。

任何关于使这段代码更实用以满足我的需求等的建议......我愿意接受批评，尤其是关于学习的建议。

谢谢

【问题讨论】：

标签： jquery ajax animation load effect

【解决方案1】：

$('.element').click(function()
{
    $('.load').load('url').hide().fadeIn('slow');
});

【讨论】：

感谢您的快速回复，这里是新手 $(document).ready(function(){ // 页面加载时加载 home.html 页面 $("#main_content_inner").load( "home.html"); $("#page1").click(function(){ // 点击时加载 page1 $("#main_content_inner").load("page1.html"); }); $(" #latest").click(function(){ // 加载最新的点击 #latest $("#main_content_inner").load("latest.html"); }); 这是我使用的编码类型的示例，你能把你的答案联系起来吗？抱歉，这个评论框有点乱，不适合格式化代码

【解决方案2】：

如果您在页面加载完成后尝试做某事，您将需要 $(document).ready()。

http://api.jquery.com/ready/

你使用 ready() 而不是 load() 的原因是，load() 发生在 html 被解析时，但在文档对象模型 (DOM) 准备好之前，这是 JS 操作页面所依赖的(DOM) 内容。因此，当您想调整浏览器呈现的内容时附加到 ready()，例如操作实际内容（添加/删除/操作元素/类/结构，初始化灯箱和其他插件，执行效果等...） .

所以，我认为你所描述的是：

$(document).ready(function(){
    $('a.clickaffected').each(function(){
        $(this).fadeIn();
    });
});

编辑：你想做一个回调函数：

$(document).ready(function(){ 
    // load home.html page when the page loads
    $("#main_content_inner").load("onmouseclick.html");
    $("#latest").click(function(){ // load page1 on click
        $("#main_content_inner").hide();
        $("#main_content_inner").load("testscript.html", function(){
            $(this).fadeIn(5000);
        });
    });
});

从你的回答来看：

$(document).ready(function(){
    // load home page when the page loads
    $("#main_content_inner").load("home.html");

    $("#page1").click(function(){
        // load page1 in main_content_inner on click
        $("#main_content_inner").hide();
        $("#main_content_inner").load("page1.html", function(){
            $(this).fadeIn(5000);
        });
    });
    $("#page2").click(function(){
        // load page2 in main_content_inner on click
        $("#main_content_inner").hide();
        $("#main_content_inner").load("page2.html", function(){
            $(this).fadeIn(5000);
        });
    });
    $("#page3").click(function(){
        // load page3 in main_content_inner on click
        $("#content").hide();
        $("#content").load("page3.html", function(){
            $(this).fadeIn(5000);
        });
    });
});

注意，您可以像 lolwut 演示的那样链接函数调用，但我不确定您是否可以在不等待加载执行动画的情况下做到这一点。所以我不确定$('#id').hide().load().fadeIn() 是否会在页面加载缓慢的情况下工作，但$('#id').hide().load(url,[callback w/fadeIn()]) 确实会在fadeIn() 触发之前等待页面完全加载。

编辑 2：

由于原始发帖人陈述的使代码正常工作的问题，我创建了一个包含在下面的 html 文件，并为每个文件创建了 page#.html。下面发布的 html 页面在我使用 jquery 1.4.4 测试时有效。

<html>
<head>
<style type="text/css">
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.js"></script>
<script type="text/javascript">

$(document).ready(function(){
    // load home page when the page loads
    $("#main_content_inner").load("home.html");

    $("#page1").click(function(){
        // load page1 in main_content_inner on click
        $("#main_content_inner").hide();
        $("#main_content_inner").load("page1.html", function(){
            $(this).fadeIn(5000);
        });
    });
    $("#page2").click(function(){
        // load page2 in main_content_inner on click
        $("#main_content_inner").hide();
        $("#main_content_inner").load("page2.html", function(){
            $(this).fadeIn(5000);
        });
    });
    $("#page3").click(function(){
        // load page3 in main_content_inner on click
        $("#content").hide();
        $("#content").load("page3.html", function(){
            $(this).fadeIn(5000);
        });
    });
});

</script>

</head>
<body>
<span id="page1">Page 1</span>
<span id="page2">Page 2</span>
<span id="page3">Page 3</span>
<h4>Main Content Inner</h4>
<div id="main_content_inner"></div>
<h4>Content</h4>
<div id="content"></div>
</body>
</html>

【讨论】：

如果您在使用特定脚本时遇到问题，请将其与问题中受影响的 html 内容一起发布。你问的有点含糊。
您是否尝试将某些内容加载到 iframe 或通过 AJAX？
fenelle，请看我最后的编辑。您需要在 load() 的第二个参数中使用作为匿名函数传递的回调。 api.jquery.com/load
再次感谢您的快速回复，让我好好看看您给我的建议。看看我能不能解决问题。如果不是，我会尝试让我的问题更清楚。再次感谢
似乎仍然无法正常工作，此代码根本没有加载任何页面，而原始 .load 函数代码作为我发布的答案（您为我解决了我的问题，谢谢) 确实加载了页面，但没有效果。如果我添加你给我的代码，比如第 1 页和第 2 页，然后将第 3 页作为我的原始代码，没有任何效果。我的第三页仍然无法加载，所以就像它完全隐藏了所有内容而没有显示一样。 :S ...也许我使用链接会更好？或任何其他建议我如何让它工作..我已经在谷歌搜索了几个小时

【解决方案3】：

基本上，如果你想做一个过渡，你必须已经有了你想加载的 HTML。由于 .load() 的回调已经改变了 DOM，你必须以另一种方式获取它。 AJAX 在这里很有用。

工作示例：http://jsfiddle.net/v6S8Z/3/

$('#loader').click(function(){
    $.ajax({
        type: 'get',
        url: 'http://fiddle.jshell.net',
        success: function(response){
            $('#main').fadeOut(function(){
                $('#main').html(''); // clear the contents - do not chain this with the next .html()
                $('#main').html(response); // add new contents - do not chain the next hide() as the element must be parsed in the DOM correctly first
                $('#main').hide().fadeIn(6000); // hide the added content, then fade in
            });
        }

    });
});

点击时通过 ajax 加载页面
ajax 完成后立即淡出现有内容
.html() 设置内容，并立即隐藏页面
.fadeIn() 慢慢淡入页面。

基本上应该就是这样了。我目前正在工作，所以我无法为您提供正确设置页面的详细示例。但我想你明白了。

但是，如果您想交叉淡化（光学）SAME Div 中的内容（例如，内容 A 从 100 淡入到 0，而内容 B 从 0 淡化到 100），除了构建相应的 HTML。您将不得不使用 2 个不同的“主”包装器，它们彼此叠放。而且您必须在每次加载时设置 z-index，以便文本选择继续工作。

希望这能让你继续前进。 :)

我真的建议首先静态构建页面，将 2 个内容 div 放在一起，然后逐渐淡入另一个。无论如何，这已经够难了，尤其是如果你对 JS 和 CSS 不熟悉的话。但是一旦你让它正常工作，你可以简单地用 .load() 填充 2 个 div 并使用你现有的转换代码。

最好的问候

【讨论】：