4

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

快速提问...

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

有关使此代码更适合我的需要的任何建议等...我愿意接受批评，尤其是有关学习的建议。

谢谢

4

3 回答 3

5 
$('.element').click(function()
{
    $('.load').load('url').hide().fadeIn('slow');
});
于 2011-02-02T19:14:54.153 回答
1

如果您在页面加载完成后尝试做某事，您将需要 $(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>
于 2011-02-02T19:15:30.827 回答
1

基本上，如果你想做一个过渡，你必须已经有了你想要加载的 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 并使用你现有的转换代码。

此致

于 2014-02-18T15:44:40.160 回答