使用jQuery淡入网页

我想做什么：

#leftSide #rightSide (display:none) _______________ _______________________________________________ | | | | category | | | -link | | | -link | | | | | | category | | | -link | | | -link | | | | content | | | | | | | | | | | | | | | | | | | | | | | | | |_______________|_______________________________________________| 

每次我点击某个类别中的链接时，我都希望使用该链接的内容淡入#rightSide 。

我知道如何在onclick中淡出它，但我不知道如何在没有页面刷新的情况下每次加载新内容。

任何帮助升值，不一定称为。 有没有人这样称呼，加载内容没有页面刷新？ 任何指针赞赏。

Answer 1

有没有人这样称呼，加载内容没有页面刷新？

这是Ajax 。

---

---

至于您的问题，请将rel属性分配给左侧边栏上的链接：

 Link 1 Link 2 Link 3 

然后为每个与其rel属性具有相同值的链接分配id到div元素（假定在您的内容区域内）：

 
Div 1 
Div 2 
Div 3 

现在使用jQuery，您只需要：

 $('a[rel^=div]').click(function(){ $('#' + this.rel).fadeIn(); }); 

这样，当单击链接时，jQuery将读取其值并在您的内容区域中显示相应的div元素。

Answer 2

看一下加载方法。 您将处理click事件，通过AJAX / .load拉入内容并应用您想要的任何效果。 就像是：

 $("link").click(function() { var $content = $("#rightSide"); $content.fadeOut(1000, function() { // Load content after transition is completed $content.load("aUrl", function() { // Show content after content is fetched $content.fadeIn(1000); }); }); return false; }); 

Answer 3

一个非常基本的实现：

 $('#left-list').on('click', 'a:link', function(){ var href = $(this).attr('href'); $('#right-side').fadeOut(500, function(){ $(this).load(href, function(){ $(this).fadeIn(500); }); }); return false; }); 

但有一些事情，比如更新你的url，以及你想要考虑的事情。

看看这篇文章： http ： //tutorialzine.com/2009/09/simple-ajax-website-jquery/ – 它涵盖了使用jQuery加载内容，包括保留URL。

Answer 4

我会在淡出#rightSide的同时立即发出ajax请求，然后在新内容可用时立即开始淡入淡出。

 $("#leftSide").on("click","a[href]",function(e){ e.preventDefault(); $("#rightSide").stop(true,true).fadeOut(); $.get(this.href).done(function(){ $("#rightSide").stop(true,true).fadeIn(); }); }); 

这样做的好处是内容立即开始加载，而不是在右侧完成淡出时，内容一旦可用就立即开始淡出而不是等待之前的内容淡出。

我不建议在这种情况下使用动画，但这是你的召唤。