Trouble with dynamic refreshing div

问题:

I make div which refresh when file is updated. But it continuously refresh (fade out and fade in every second).
I't source test2.php

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js>
    </script>                          
    <script> 
    $(document).ready(function() {
       $('#loaddiv').load('check.chat.php');
     });


    var auto_refresh = setInterval( function() {
    $.ajax(
        {
        type: 'POST',
        data:"id=100",
        url: "check.chat.php",
        success: function(result) 
        {
            if($("#loaddiv").html() != result)
            {
                $("#loaddiv").fadeOut("fast")
                $("#loaddiv").html(result);
                $("#loaddiv").fadeIn("slow");
           }
        }
    });
    }, 1000);
    </script>

    <div id="loaddiv"></div>

And file on site: **

Who knows what's the problem?

回答1:

This part:

$("#loaddiv").fadeOut("fast")
$("#loaddiv").html(result);
$("#loaddiv").fadeIn("slow");

Should be:

$("#loaddiv").fadeOut("fast", function(){
        $("#loaddiv").html(result);
        $("#loaddiv").fadeIn("slow");
});

In your case, both fades are called at the same time, making an animation queue, causing it to go from one phase to another in about the same time the interval triggers again.

---

UPDATE

To see logs, do this: console.log("html: ", $("#loaddiv").html(), "result: ", result);