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

您的脚本存在的一个问题是，您对所有使用文本类和＆amp;的项目应用 fadeOut 尝试淡出其中一个回来。更好的方法是跟踪当前选定的文本，例如添加另一个类选择。

以下是您可以使用的修改过的脚本。其中一个 text 类的项目必须始终包含选择类。

$(".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");

jQuery淡出淡入替换文本而跳跃而不是覆盖

1 个答案: