0

以下のコードは、次の Web ページで実行されています。回転するバナーの下の左側にある 3 つのボタンのいずれかをクリックすると、ここで説明した動作が表示されます。ボタンの横にあるテキストは、フェードアウトして新しいセクションにフェードインするためのものです。しかし、新しいセクションは、最初のセクションが消える前にフェードインし、元に戻ります。

フェードインにコールバック関数を使っていたので、これは起こらないと思いました。誰が私が何をすべきかについてアドバイスできますか?

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

スクリプトの問題の 1 つは、テキストクラスを持つすべてのアイテムにfadeOutを適用し、そのうちの 1 つをfadeInしようとすることです。より良いアプローチは、別のクラスselectedを追加するなどして、現在選択されているテキストを追跡することです。

これが、作業できる変更されたスクリプトです。テキストクラスを持つアイテムの 1 つは、常に選択されたクラスを持っている必要があります。

$(".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 に答える