-1

I have a piece of code here which it works but not sure why my fadein and fadeout doesn't work for the body, If you think what the issue i'm having please let me know thanks

    <script type="text/javascript">
$(window).load(function() {
    var lastSlide = "";
    $('#slider').nivoSlider({
        effect: 'random',
        directionNavHide : true,
        slices : 15,
        animSpeed : 500,
        pauseTime : 6000,
        controlNav : false,
        pauseOnHover : true,
        directionNav:true, //Next & Prev
        directionNavHide:true, //Only show on hover
        beforeChange: function(){
            if(lastSlide == "images/header_used.jpg") {  //use the bg image of the slide that comes before the newslide
                $("body").attr("style","background: #000 url(images/bg.jpg) top center no-repeat;").fadeIn("slow");
            } else {
                $("body").attr("style","background: #ADADAD url(images/bgnd_grad.jpg) repeat-x;").fadeOut("slow");
            }
        },
        afterChange: function() {
            t = $(this).children("a:visible");
            lastSlide = $("img", t).attr("src");
        }
    });
});
</script>
mmz
  • 31
  • 6
  • `$("body").attr("style","background: #000 url(images/bg.jpg) top center no-repeat;").fadeIn("slow");` - should be - `$("body").css("background", "url(images/bg.jpg) no-repeat center top #000").fadeIn("slow");` – Reflective Oct 21 '12 at 21:13
  • Hey, thanks for replying still doesnt work. – mmz Oct 21 '12 at 21:29

3 Answers3

0

While it may solve your mission with the body background. i would instead have used addClass and removeClass. You are manipulating the style attribute which also show/hide uses it.

I have no way to test it but what happens if you switch the fades to show() and hide(), just to determine if delay is a factor.. :)

Oliver
  • 11
  • 2
0

It my come by the fact that "lastSlide" variable could store multiple object (the one from img and the one from visible link).

 t = $(this).children("a:visible");
 lastSlide = $("img", t).attr("src");  //could store multiple source.

This make comparation a little bit tricker and could create bug.

Plus the fact that you use the worst way to style your body. As other says, use class or .css jQuery function (http://api.jquery.com/css/).

Hope this help

kirkas
  • 1,749
  • 2
  • 12
  • 22
0

fadein and fadeout work for body,absolutely. as Reflective said, it should be $("body").css("background","#000 url(images/bg.jpg) top center no-repeat;").fadeOut("slow") if still doesn't work, you may should look into your nivoSlider function

Tom
  • 77
  • 6