Question

我正在网站上建立一个限制为4个项目的投资组合部分。每个项目都有一个可见的图像和描述，以及默认隐藏的详细信息部分。

想法是在单击该项目的链接时使详细信息部分淡入。我有一个工作小提琴我放在一起，但如果已经有一个细节部分可见，你点击另一个链接，发生了一些厚重的重叠。

这是我用来控制每个细节部分的片段：

你可以在这里看到小提琴：http://jsfiddle.net/ERP7L/6/

$("a#project-1-link").click(function(){
  $("div#project-2-details, div#project-3-details, div#project-4-details").fadeOut("",function(){
      $("div#project-1-details").fadeIn(""); 
  });  
});

有没有更好的方法来实现这一目标，以消除这种滞后？我尝试在fadeIn上使用延迟，但它也没有用。

提前致谢！

Answer 1

您需要在.fadeOut()上使用回调，这是语法：

$(divToHide).fadeOut(400, function() {
    $(divToShow).fadeIn();
});

只有在fadeOut()函数只调用一次 - 在可见元素上时，这才有效（顺利）。所以最好的方法是找到可见的div，然后只针对那个div，而不是定位所有-details div：

var visibleDiv = $('.nav ~ div').filter(function() { return $(this).is(':visible'); });

然后回调看起来像这样：

$(visibleDiv).stop().fadeOut(400, function() {
    $(divToShow).fadeIn();
});

我还要添加.stop()以防止多个褪色进出堆积。

另外，值得注意的是，如果不为每个链接创建不同的功能，这是可行的。只需使用：

$('.nav a').click(function(event) {
    var currentElement = $(event.currentTarget);
    var divToShow = $(currentElement).attr('id').replace('link', 'details');
    ....
});

要获取您需要从您点击的任何链接显示的div。所以，jQuery一起看起来像：

$('.nav a').click(function(event) {
    var currentElement = $(event.currentTarget);
    var divToShow = $(currentElement).attr('id').replace('link', 'details');

    var visibleDiv = $('.nav ~ div').filter(function() { return $(this).is(':visible'); });
    if (visibleDiv.length) // if there is a div already visible, fade it out then fade in the target div
    {
        $(visibleDiv).stop().fadeOut(400, function() {
            $('#' + divToShow).fadeIn();
        });
    }
    else $('#' + divToShow).fadeIn(); // fade it in.
});

我还添加了if声明，因此第一个div中的渐弱没有延迟。

JSFiddle Here。希望这有帮助！

Answer 2

一个技巧是使用position: absolute，以便DIV元素（内容）占用相同的空间并很好地交叉渐变。我还使用className代替id删除了大量重复代码。

修正了JSFiddle：http://jsfiddle.net/os8zmhgc/

Runnable片段：

＆＃13;

$(document).ready(function() {
  $("A", ".nav").click(function() {
    var targetId = $(this).data("target");
    var $targetDiv = $("#project-" + targetId + "-details");
    $(".project-details").fadeOut();
    $targetDiv.fadeIn();
  });
  $("a.close").click(function() {
    $(".project-details").fadeOut();
  });
});

＆＃13;

div.nav {
  margin: 20px 0;
}
.project-details {
  position: absolute;
  z-index: 1;
  display: none;
  background-color: black;
  color: white;
  padding: 40px;
}
a.close {
  cursor: pointer;
  background: white;
  color: black;
  padding: 10px;
  position: relative;
  top: -30px;
  left: -40px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<div class="nav">
  <a href="#" id="project-1-link" data-target="1">One</a>
  <a href="#" id="project-2-link" data-target="2">Two</a>
  <a href="#" id="project-3-link" data-target="3">Three</a>
  <a href="#" id="project-4-link" data-target="4">Four</a>
</div>
  <div id="project-1-details" class="project-details">
    <a class="close">x</a>
    <strong>One.</strong> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</div>
  <div id="project-2-details" class="project-details">
    <a class="close">x</a>
    <strong>Two.</strong> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</div>
  <div id="project-3-details" class="project-details">
    <a class="close">x</a>
    <strong>Three.</strong> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</div>
  <div id="project-4-details" class="project-details">
    <a class="close">x</a>
    <strong>Four.</strong> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</div>

＆＃13;

Answer 3

如此：

＆＃13;

$('body').on('click', '#nav > a', function(){
  var detail = $('#nav-details > div:eq(' + $(this).index() + ')');
  detail.siblings().fadeOut().promise().done(function(){
    detail.fadeIn();
  });
});
$('body').on('click', '#nav-details .close', function(){
  $(this).parent().fadeOut();
});

＆＃13;

#nav{
    margin:20px 0;
}
#nav-details > div{
    display:none;
    background-color:black;
    color:white;
    padding:40px;
    position: relative;
}
span.close{
    cursor:pointer;
    background:white;
    color:black;
    padding:10px;
    position:absolute;
    top:0;
    left:0;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="nav">
  <a href="#">One</a>
  <a href="#">Two</a>
  <a href="#">Three</a>
  <a href="#">Four</a>
</div>
<div id="nav-details">
  <div>
    <span class="close">x</span>
    <strong>One.</strong> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
  </div>
  <div>
    <span class="close">x</span>
    <strong>Two.</strong> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
  </div>
  <div>
    <span class="close">x</span>
    <strong>Three.</strong> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
  </div>
  <div>
    <span class="close">x</span>
    <strong>Four.</strong> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
  </div>
</div>

＆＃13;

Answer 4

嗯，首先。如果要对每个元素执行相同的操作，请尝试使用类。（我的意思是同样的行动：打开和关闭）

因此，您仍然可以将ID用于非常具体的原因，并使用通用的类。

我试图在没有对html部分进行很多修改的情况下更简单地做到这一点。但我建议您将链接和详细信息放入容器中。

这是一个解决方案，我知道它似乎很复杂......也许用fadeToggle会更好。但是修改DOM是必要的。

这是您的HTML（包含类和数据属性）：

<div class="nav">
<a href="#" id="project-1-link" class="project" data-id="1">
    One     
</a>


<a href="#" id="project-2-link"  class="project" data-id="2">
    Two     
</a>


<a href="#" id="project-3-link"  class="project" data-id="3">
    Three  
</a>

<a href="#" id="project-4-link"  class="project" data-id="4">
    Four  
</a>




<div id="project-1-details" class="details">
    <a class="close">x</a>
    <strong>One.</strong> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
</div>

<div id="project-2-details"  class="details">
    <a class="close">x</a>
    <strong>Two.</strong> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
</div>

<div id="project-3-details"  class="details">
    <a class="close">x</a>
    <strong>Three.</strong> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
</div>


<div id="project-4-details"  class="details">
    <a class="close">x</a>
    <strong>Four.</strong> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
</div>

data-id是要知道我正在调用的号码，我们将在脚本上使用它，因此您不必为每个元素编写一行代码。

这是脚本：

$(function(){
    $(".project").on("click", function(){

     // HERE WE TAKE THE NUMBER OF THE ID FROM THE CLICKED OBJECT

     var dataid = $(this).attr("data-id");

     // THEN WE FADE OUT EVERYTHING IS VISIBLE
     $(".details").fadeOut();

     //HERE, WE'LL TAKE THE ONE WE'RE GONNA FADE IN
     setTimeout(function(){
        $("#project-"+dataid+"-details").fadeIn();
     },400)
  });
})

这是jsFiddle：

http://jsfiddle.net/mpcguc4k/

很抱歉答案很长。

使用jQuery在一页网站上切换内容div

4 个答案: