1

Web サイト用に Jquery を使用して Testimonial rotator を作成していますが、Ajax 関数の実行が早すぎるため、HTML の変更が表示され、フェードアウトして元に戻ります。問題を理解しようとしましたが、できませんでした。見つけられないようです。

<div class="testimonials">
    <div id="testimonial"></div>
</div>
<script type="text/javascript">
    function loadTestimonial(){
        $("#testimonial").fadeOut(1000);
        $.ajax({
            url: "r/get_testimonial.php",
            cache: false,
            async: false,
            timeout: 1000,
            success: function(html){
                $("#testimonial").html(html);
            },
          });   
          setTimeout($("#testimonial").fadeIn(1000), 2000);
      } 
      $(document).ready(function(){
        loadTestimonial();
        setInterval (loadTestimonial, 5000) 
      });
</script>
4

1 に答える 1

1

このコードを試してください：

<div class="testimonials">
    <div id="testimonial"></div>
</div>
<script type="text/javascript">
    function loadTestimonial(){
        $("#testimonial").fadeOut(1000, function(){
            $.ajax({
                url: "r/get_testimonial.php",
                cache: false,
                async: false,
                timeout: 1000,
                success: function(html){
                    $("#testimonial").html(html).fadeIn(1000);
                },
              });   
        });
      } 
      $(document).ready(function(){
        loadTestimonial();
        setInterval (loadTestimonial, 5000) 
      });
</script>

コードの何が問題になったのですか? ajax コードはすぐに呼び出され、準備ができたら古い HTML を置き換えます。上記で行うことは、のコールバックを待ってからfadeOut()Ajax 関数をトリガーすることです。ソースとfadeIn新しい HTML を取得します。

同期機能だと思うかもしれませんが (Ajaxasync: falseにfadeOutは .

于 2011-12-28T10:13:07.797 に答える