javascript - jQuery fade out fade in 在跳转时替换文本而不是覆盖

Question

以下代码在以下网页上运行。如果您单击旋转横幅下方左侧的三个按钮中的任何一个，您将看到我所说的行为。按钮旁边的文本用于淡出和淡入新部分。但是新的部分会在第一个部分消失之前淡入并跳回。

我以为我正在使用淡入淡出的回调函数，因为这不会发生。任何人都可以建议我应该做什么吗？

http://www.tacticalsalestraining.co.uk/

<span style="float:left;">
  <a target="_blank" href="http://www.tacticalsalestraining.co.uk/sales-training-courses-listing" class="textbutton" data-conn="text1">
  <img src="/images/OpenOver.png" alt="Open Courses" width="300" height="47">
  </a><br />
    <a target="_blank" href="http://www.tacticalsalestraining.co.uk/sales-training-courses-listing" class="textbutton"  data-conn="text2">
  <img src="/images/InHouseOver.png" alt="In House Training" width="300" height="47">
  </a><br />
  &nbsp;
    <a href="http://tacticalsalestraining.com/seminars/seminars_full.html" class="textbutton"  data-conn="text3">
  <img src="/images/FreetoAttendOver.png" alt="Free to Attend" width="300" height="47">
  </a>
</span>
<span style="width:610px;height:200px;float:right; background-color:#bcbcbc;font-size:15px;line-height:15px;">
<div class="texts" id="text"><h1>UK's Fastest Growing Sales Training Company</h1>
Tactical Sales Training, providers of measurably effective sales courses for all industries. We offer training that's interactive, effective and straight out of our own playbook.<br />
We practice what we teach; the courses are filled with exactly what we do back in the office when prospecting for new clients or looking to close deals. 

</div>
<span class="texts" id="text1" style="display:none;"><h2>Action Based Open Sales Courses, Nationwide</h2>
Trouble getting new business? Difficulty closing that deal? How's your qualification going? These are questions that can define the difference between a good or great sales person. We've helped 100s of businesses exponentially increase their sales with our open courses, what can we do for you?
</span>
<span class="texts" id="text2" style="display:none;"><h2>For the More Tricky Sales Processes</h2>
Getting to the root of the problem or finding the perfect solution can be a call for our bespoke option. Many national and international companies have opted for this because they wanted us to look deep into their sales processes.<br /><br />
They also wanted the perfect solution with instantly actionable solutions that prove the effectiveness with measurable results. We've provided just that, every single time we go out on a bespoke mission.
</span>
<span class="texts" id="text3" style="display:none;">Content Text</span>
</span>
<script>
$(".textbutton").click(function(){
var link = $(this).attr("data-conn");
        $(".texts").fadeOut(1000, function() {
            $("#"+link).fadeIn(1000);
        });
        return false;
});
</script>

Answer 1

脚本的一个问题是您对所有具有 texts 类的元素应用 fadeOut 并尝试fadeIn 其中一个回来了。更好的方法是跟踪当前选定的文本，比如添加另一个类 selected。

这是您可以使用的修改后的脚本。具有 texts 类的元素之一必须始终具有 selected 类。

$(".textbutton").click(function(){
   var link = $(this).attr("data-conn"); 
   $(".texts.selected").removeClass("selected").fadeOut(1000, function() { 
          $("#"+link).addClass("selected").fadeIn(1000); 
          });
   return false;
});

$(".texts:first()").addClass("selected");