Question

我正在慢慢推进我的工作，不断尝试不同的方法。

快速提问......

是否可以将.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中。

任何关于使这些代码更符合我的需求等的建议......我很容易接受批评，特别是建议，因为这都是关于学习的。

感谢

Answer 1

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

Answer 2

如果您在页面加载完成后尝试执行某些操作，那么您将需要$（document）.ready（）。

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

你使用ready（）而不是load（）的原因是，在解析html时，但在文档对象模型（DOM）准备就绪之前发生了load（），这是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文件，我在下面包含，为每个创建了页面＃.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>

Answer 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完成后立即淡出现有内容
.html（）设置内容，并立即隐藏页面
.fadeIn（）在页面中缓慢淡出。

这应该基本上就是这样。我目前正在工作，所以我不能给你一个详细的例子和正确的设置页面。但我认为你明白了。

但是，如果你想在（光学）SAME Div中对内容进行CROSS淡化（例如，内容A从100渐变为0，而内容B从0渐变为100），除了构建之外没有别的办法相应的HTML。您将不得不使用两个不同的“主要”包装纸叠在一起。并且您必须在每个负载上设置z-index，以便文本选择继续工作。

希望这能让你前进。：）

我真的建议首先静态构建页面，其中2个内容div在彼此之上，逐渐淡化。无论如何，这很难，尤其是如果你在JS和CSS中没有很好的解决方案。但是只要你正常工作，就可以使用.load（）填充2个div并使用现有的转换代码。

最好的问候

JQuery：你能为.load添加过渡效果吗？

3 个答案: