배경 이미지를 동시에 페이드 인 및 아웃

문제는 배경 이미지가 크기가 다르며 예측할 수 없기 때문에 CSS 전환을 사용하면 스트레치가 움직이지 않아 추한 것처럼 보입니다. 따라서 JS로이 작업을 수행해야합니다. 내가 원하는 무엇배경 이미지를 동시에 페이드 인 및 아웃

var images = [ 
    "http://ns223506.ovh.net/rozne/e800637ee8c7de5cdaed8df8ea3635f1/wallpaper-2585508.jpg", 
    "http://ns223506.ovh.net/rozne/15382371cb0d5b9319f5f4469bbc4511/wallpaper-2585497.jpg" 
]; 

var counter = 0; 
setInterval(function() { 
    $(".bg").css('backgroundImage', 'url("' + images[counter] + '")'); 

    $('<img>').attr('src', images[++counter]); // preload the next image 

    if (counter == images.length) counter = 0; 

}, 2000);

http://jsfiddle.net/mVAvF/1/

이전을 페이드 아웃하는 동안 새로운 배경 이미지에 페이드입니다. 어떤 제안?

출처

2013-02-22 ditto

'카운터 == images.length'가 있어야한다 '카운터 == (images.length-1)': 그건 jsFiddle를 포함하기 전에

나는 비슷한 질문에 대답? 'images [2]'는 요소를 포함하고 있지 않습니다. – Johan

동일한 요소에서 한 배경을 다른 배경으로 희미하게 할 수 없습니다. 현재 배경 위에 또 다른 요소를 추가 한 다음, 새로운 요소가 맨 위에 있으면 페이드하거나 새 요소가 뒤에있는 경우 이전 요소를 사라지게해야합니다. 오른쪽 jQuery background image rotation script - looking to modify

출처

2013-02-22 14:00:37

배경 이미지를 동시에 페이드 인 및 아웃

답변

관련 문제