jQuery - Show/hide has problems with centered items

All I want is, as the code says, to loop a show-hide animation. Somehow it seems to automatically move to the left and back to the center.

What's happening and how do I keep it fixed to the center?

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

<script>
function running(){
    $("#hider").show("slow").hide("slow", running);
}

$(document).ready(function(){
    running();
});

</script>
</head>
<body>
<center id="hider">Hiding...</center>
</body>
</html>

Solution

show and hide are both just changing the display CSS property, which seems to be causing block issues with the center element. You could use fadeIn and fadeOut instead:

<html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script>
        function running(){
            $("#hider").fadeIn("slow").fadeOut("slow", running);
        }

        $(document).ready(function(){
            running();
        });
    </script>
</head>
<body>
    <center id="hider">Hiding...</center>
</body>
</html>