JQuery FadeIn effect for site background image

I'm trying to get the fadeIn() effect to work for a roatating series of images. I've adopted some code from another answer that works well but unfortunately i can't get it the fading effect. I tried adding fadeIn() to the $('<img/>').fadeIn().attr sequence but can't seem to figure this one out...

any thoughts?

$.fn.smartBackgroundImage = function(url){
      var t = this;
      //create an img so the browser will download the image:
      $('<img />')
        .attr('src', url)
        .load(function(){ //attac开发者_运维问答h onload to set background-image
            t.each(function(){ 
              $(this).css('backgroundImage', 'url('+url+')' );
           });
        });
       return this;
     }

    //10 second Interval
    window.setInterval(rotate, 10000);
    var counter = 0;
    function rotate() { 
        //Rotage through images 0 - 4
        $('html').smartBackgroundImage('assets/background'+counter+'.jpg');
        counter == 3? counter = 0 : counter++;
    }

---

try

$("html").smartBackgroundImage("assets/background" + counter + ",jpg").fadeIn();