javascript - 如何使用 jQuery 淡出主 div 并淡入相应单击缩略图的内容

Question

jQuery 的一些新功能...我正在设置一个投资组合页面。我有一个主 div，显示元素的图像和描述，然后是所有元素的缩略图文本(简短标题)列表。这就是我想要做的:

当点击一个特定的缩略图文本时，主div淡出当前可见的元素并淡入对应于缩略图的元素。使用 href 将目标内容加载到主显示器的最佳方式是什么？

似乎找不到能让我轻松做到这一点的插件。一直在尝试使用 http://perishablepress.com/slide-fade-content 中的一些 javascript .

<!--MAIN DISPLAY-->
<div id="main">
<div id="projectA">
<img src="projectA-image.png" />
<div id="projectA">Description of Project A...</div>
</div>

<!--THUMBNAILS-->
<div class="thumb">
<a href="#projectA" class="thumb-text">PROJECT A</a>
</div>

<div class="thumb">
<a href="#projectB" class="thumb-text">PROJECT B</a>
</div>

这是我对 javascript 的了解:

 $('div.thumb-text').click(function () {    
        var href = $(this).attr('href');
        $('div#piece-content').fadeOut("slow", function(){
            $('div#piece-content').load('portfolio.html#' +href);

        });
      });

Answer 1

我在这里看到了一些问题。首先，你的选择器是错误的。 div.thumb-text 将选择所有具有 thumb-text 类的 div。这些你都没有。这应该是 div .thumb-text 以查找 div 中具有 thumb-text 或 a 类的所有元素。 thumb-text 获取所有 a 类为 thumb-text 的标签。

第二，$('div#piece-content').load('portfolio.html#' +href); 你最终会得到两个 #在这种情况下，因为 href 已经有了一个。而且我不确定你的意图是什么，但是 # 不用于将东西传递到后端，你可能打算使用 ?，不完全确定你是什么要去这里。

最后，你永远不会淡入淡出元素。所以在你的 .load 中你需要一个回调:

$('div#piece-content').load('portfolio.html#' +href, function(){
   $(this).fadeIn();
});