부드러운 전환 동안 배경 전환

Question

메신저 동적 배경 페이지를 만들려고. 아래 코드를 사용하여 im;

 

function loadBackground() { 
    $.ajax({ 
     url: 'getimages.php', 
     success : function(filename) { 
     $('html').css('background', 'url('+filename+') no-repeat center center fixed'); 
     $('html').css('-webkit-background-size', 'cover'); 
     $('html').css('-moz-background-size', 'cover'); 
     $('html').css('-o-background-size', 'cover'); 
     $('html').css('background-size', 'cover'); 
     } 
    }); 
} 
 
와 : 본체의 onLoad = "에서는 setInterval (loadBackground 10000);"
 

메신저 10 초 후에 자동 변경되기 때문에 이것을 사용합니다.
 

여기 getimages.php 파일입니다
 

 

 

$files = glob('server/php/files/*.*'); 
    $file = array_rand($files); 
    echo $files[$file]; 
 

하지만 원활한 전환하지 않고 직접 이미지를 변경합니다. 배경 그림을 부드럽게 전환하는 방법?
 

최고.

Answer 1

ajax 성공 콜백에서 CSS 전환을 적용한 다음 배경 이미지를 설정해야합니다. 예를 들어 페이드 아웃 + 새 이미지 + 페이드 인 설정.

이미지 태그에 페이드 아웃을 적용하는 샘플 CSS 코드입니다.

img{-webkit-transition: all 1s ease-out; 
    -moz-transition: all 1s ease-out; 
    -o-transition: all 1s ease-out; 
    -ms-transition: all 1s ease-out; 
    transition: all 1s ease-out; 
    width:50%; height:50%} 


img:hover{opacity:0} 

다른 방법으로는 예를 들어, jQuery를 사용할 수 있습니다

$("#book").fadeOut("slow", function() { 
    // Animation fade-out complete 
    $("#book").fadeIn("slow", function() { 
     // Animation complete 


    }); 

}); 

// ===== 그래서를 =====

function loadBackground() { 
    $.ajax({ 
     url: 'getimages.php', 
     success : function(filename) { 

     $('html').fadeOut("slow", function() { 
      // Animation fade-out complete 


      $('html').css('background', 'url('+filename+') no-repeat center center fixed'); 
      $('html').css('-webkit-background-size', 'cover'); 
      $('html').css('-moz-background-size', 'cover'); 
      $('html').css('-o-background-size', 'cover'); 
      $('html').css('background-size', 'cover'); 


      $('html').fadeIn("slow", function() { 
      // Animation complete, finish 


      }); 

     }); 



     } 
    }); 
} 

을 내가 특정을 사용하는 것이 좋습니다 'html'대신 html 요소를 사용합니다.