这对你有用吗？

Question

我想显示2个链接来切换它们下面的段落。

第一人称的一个链接，第三人的另一个链接。

我使用一些jQuery创建了一个小提琴：

$("a#first").click(function(){
    $("div.thirdperson").fadeOut("");
    $("div.firstperson").fadeIn("");        
});

它有效，但它并不像我想的那样顺畅。你可以看到转变。

我想将文本分成两个div，并且不想使用“.text”jQuery命令简单地编辑div的文本部分。例如：

$(this).text("DON'T PUSH ME");

这是我的小提琴：http://jsfiddle.net/8k27p/

Answer 1

如何在选择器和fadeIn（）之间使用.delay（）。这是一个jsFiddle。

$(document).ready(function(){
    $("a#first").click(function(){
        $("div.thirdperson").fadeOut("");
        $("div.firstperson").delay(500).fadeIn("");        
      });
    $("a#third").click(function(){
        $("div.firstperson").fadeOut(""); 
        $("div.thirdperson").delay(500).fadeIn("");       
      });
});

Answer 2

您可以使用回调...这里是DEMO

$(document).ready(function(){

   $("a#first").click(function(){
      $("div.thirdperson").fadeOut("",function(){
          $("div.firstperson").fadeIn(""); 
      });         
   });

   $("a#third").click(function(){  
      $("div.firstperson").fadeOut("",function(){
          $("div.thirdperson").fadeIn(""); 
      });        
   });
});

Answer 3

http://jsfiddle.net/upsidown/8k27p/1/

使用单个选择器并切换可见性。

$('.person').toggle();

Answer 4

这对你有用吗？

小提琴：http://jsfiddle.net/SinisterSystems/8k27p/5/

我基本上只是制作了wrapper（位置：亲戚），因此它实际上会跟随structure的{{1}}，然后是DOM position:absolute s在他们内心，所以他们互相漂浮。

<强> HTML：

div

<强> CSS：

<div class="wrapper">
    <div class="firstperson">
        <strong>First Person.</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 class="thirdperson">
        <strong>Third Person.</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>

<强>的Javascript

div.nav{
    margin-bottom:20px;
}

.thirdperson{
    display:none;
}
.wrapper {
    position:relative;
}
.thirdperson, .firstperson{
    position:absolute;
}

Answer 5

这是您的问题的另一种可能的解决方案。首先将firstperson和thirdperson打包到一个包含copy类的容器中，然后试用这个js：

<强> Example Fiddle

$(document).ready(function(){
    $('.nav').on('click', 'a', function (e) {
       e.preventDefault()

       var target = $(this).index(); 
        $('.copy div').hide();
        $('.copy').children().eq(target).fadeIn('fast');
    });
});

显示不同的div jquery / css

5 个答案:

这对你有用吗？