Question

JavaScript section:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
        $('document').ready(function(){
            setTimeout('slideback()', 1000);
            function slideback()
            {
                $('body').css('background-image','url(http://sehirmedya.com/wp-content/uploads/2012/12/uluda%C4%9F.jpg)');
            }
        });
</script>

CSS code:

body{
                background-image:url('taksi.jpg');
                background-size:100%; 
                background-attachment:fixed;
                -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(
                src='taksi.jpg',
                sizingMethod='scale')";
                filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(
                src='taksi.jpg',
                sizingMethod='scale');
            }

After 1000 miliseconds, it should change but doesn’t. Why not? How can I solve this?

Answer 1

slideback is scoped inside the DOM ready handler scope. By passing a string to setTimeout, you’re invoking a global eval of it. Instead, pass the function as reference:

 $('document').ready(function() {
      setTimeout(slideback, 1000);
      function slideback() {
          $('body').css('background-image','url(http://sehirmedya.com/wp-content/uploads/2012/12/uluda%C4%9F.jpg)');
      }
 });