如何調整jQuery圖像轉換

Question

我有一個jQuery插件，我在wordpress網站上使用。它是在主頁上的3個背景圖像之間相互轉換。問題在於它不是一個平穩的過渡，而是一個突然的過渡。不好看。下面是代碼：

jQuery(document).ready(function($) { 
    var currentBackground = 0; 
    var backgrounds = []; 
     backgrounds[0] = 'http://soloveracruzesbello.mx/wp-content/uploads/img/soloveracruz/sites/7/2016/02/solo-veracruz-es-bello.jpg'; 
     backgrounds[1] = 'http://soloveracruzesbello.mx/wp-content/uploads/img/soloveracruz/sites/7/2016/02/solo-veracruz-es-bello-4.jpg'; 
     backgrounds[2] = 'http://soloveracruzesbello.mx/wp-content/uploads/img/soloveracruz/sites/7/2016/02/solo-veracruz-es-bello-5.jpg'; 

    function changeBackground() { 
     currentBackground++; 
     if(currentBackground > 2) currentBackground = 0; 

     $('#elheader').fadeIn(2000,function() { 
      $('#elheader').css({ 
       'background-image' : "url('" + backgrounds[currentBackground] + "')" 
      }); 
      $('#elheader').fadeIn(2000); 
     }); 


     setTimeout(changeBackground, 3000); 
    } 

    jQuery(document).ready(function($) { 
     setTimeout(changeBackground, 3000);   
    }); 
}); 

我一直在擺弄與設置在效果基本show，了slideDown，淡入，淡出，但我不能讓他們圖像平滑地過渡。建議？

Answer 1

如果您正在使用jQueryUI的，你可以這樣做以下：

活生生的例子：http://codepen.io/larryjoelane/pen/NNKEOw

的JQuery/jQueryUI的：

$('#elheader').fadeIn({ 

    duration: 2000, 
    easing: "linear"  

}); 

下面是一些額外的寬鬆政策功能的鏈接，您可以試試， https://api.jqueryui.com/easings/

Answer 2

使用javascript動畫並不是最好的主意。考慮使用CSS。 您可以通過動畫不透明度實現淡入淡出效果。

.someClass{ 
    transition: all .5s; 
    opacity:0; 
} 

而且here你可以看到它在行動。此外，您可以用關鍵幀動畫替換js調用交換類。

Answer 3

因爲您正在更改同一個#elheader元素的background-image，所以轉換顯示爲突然顯示。此外，請注意，您只需要fadeIn標頭而不會調用fadeOut，因此標頭在第一個fadeIn後仍處於完全不透明狀態。

創建圖像之間的平滑過渡，而不會顯著修改你的代碼最簡單的方法是在頭部的background-image添加CSS transition像這樣：

#elheader { 
    transition: background-image 1s ease-in-out; 
} 

或者，您也可以將您的每一個背景的成個別元素 - 通過它們循環，淡入淡出。