0

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

我认为当我使用回调函数进行淡入淡出时，这不会发生。谁能建议我应该做什么？

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>
4

1 回答 1

0

您的脚本的一个问题是您对所有具有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");
于 2013-05-27T17:14:32.900 回答