Question

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?

Answer 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);