使用 jquery 地址（ajax）淡入和淡出内容

Posted 2023-05-07

【中文标题】使用 jquery 地址（ajax）淡入和淡出内容

【英文标题】：Fade in & out content with jquery address (ajax)

【发布时间】：2012-09-28 21:46:00

【问题描述】：

如何让已经加载的内容在新内容加载后淡出，然后这个新内容淡入。

我正在使用 jquery 地址来尝试实现这一点，如果使用另一个插件更容易/更好，请推荐一个 :-)

我的代码如下：

    function loadURL(url) 
        console.log("loadURL: " + url);
        $("#content").load(url);
    

    $.address.init(function(event) 
        console.log("init: " + $('[rel=address:' + event.value + ']').attr('href'));
    ).change(function(event) 
        $("#content").load($('[rel=address:' + event.value + ']').attr('href'));
        console.log("change");
    )

    $('a').click(function()
        loadURL($(this).attr('href'));
        $("#content").hide();
        $("#content").fadeIn();
    );

我确实尝试并认为我可以创建一个加载器 div，我会在顶部淡入而不是淡出内容，但我真的不知道该去哪里。

在内容淡入的那一刻，一旦您单击另一个链接，它就会变为新内容，也会淡入，但我不知道如何在新内容淡出之前使其淡出在。

任何帮助将不胜感激！

【问题讨论】：

如果你想让一个同时淡出另一个淡入，你需要两个独立的div。

这可能是一个选项，但理想情况下，我希望 div 中的内容或整个 div 淡出，然后新的内容随着新内容淡入，如果这样的话任何意义

这完全有道理。那么你需要淡出 div，更改内容然后再次淡入 div - 这似乎是你正在做的事情。你到底卡在哪里了？

它做了它应该做的，只是方式不对哈哈。它基本上是这样做的：隐藏新数据中加载的新数据淡入新数据——但不是淡出以前的数据它只是消失，如果已按下链接以在中加载新数据，我需要淡出旧数据

【参考方案1】：

听起来this fiddle 就是您要找的东西。我用jQuery.ajax()

$('#b').click(function()
    $.ajax(

      //i had to create another test fiddle to overcome the 'same origin' issues
      url: 'http://fiddle.jshell.net/K6YPD/show/',
      success: function(data)              

          //we have the data now
          $('#content').fadeOut(1500, function() 
            //this is a callback once the element has finished hiding

              //populate the div with whatever was returned from the ajax call
              $('#content').html(stripHTML(data));
              //fade in with new content
              $("#content").fadeIn(1500);
          );
      
    );
);

【讨论】：

为了提高效率，您可以通过将两行合并为一行来消除一个 jQuery 选择器，如下所示：$('#content').html(stripHTML(data)).fadeIn(1500); 在我的示例中更容易看到发生了什么，但这一行更快。跨度>