平穩變化的背景而徘徊的元素

上，而搜索解決我的問題，我發現用戶阿倫P佐尼的有關如何使變化的背景平穩變化的背景而徘徊的元素

jQuery(function(){ 
    var $body = $('body'); 
    $('.menu-item-1').hover(function(){ 
     $body.css('background-image', 'url("yadayadayada.jpg")') 
    }, function() { 
     $body.css('background-image', '') 
    }) 
})

的效果，但如何使一個答案一個平穩的變化？

來源

2014-09-20 Артур Пипченко

你所說的「平改」呢？像淡入？ – 2014-09-20 20:20:35

是的，確切地說，當一個背景圖像順利變成另一個 – 2014-09-20 20:22:34

Css轉換 – 2014-09-20 20:23:23

據我所知，如果沒有大量（和緩慢）的javascripting，每個像素爲每個圖像源創建動畫，就無法在單個元素上完成此操作。對我來說似乎不好。

相反，向您的DOM中添加另一個元素併爲其設置動畫效果，並且您可以使用CSS轉換進行設置。簡單，快速。

這裏是重要的CSS部分：

body { 
    background: url(image1.jpg); 
} 
div { 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    background: url(image2.jpg); 
    transition: all 0.5s linear; 
} 
div:hover { 
    opacity: 0; 
}

這是給你一個工作fiddle。

編輯時，OP評論：

從CSS中刪除:hover選擇和修改您的JS是這樣的：

jQuery(function(){ 
    var $div = $('div'); 
    $('.menu-item-1').hover(function(){ 
     $div.css({opactiy: 0}) 
    }, function() { 
     $div.css({opacity: 1}) 
    }) 
})

來源

2014-09-20 21:39:12

的主要想法是，一個div的背景應該改變，同時懸停另一個元素 – 2014-09-20 21:51:40

好的。沒問題。使用相同的基本aproach，但使用您自己的jQuery事件處理程序來觸發CSS轉換。我編輯了我的答案以反映這一變化。 – 2014-09-20 21:57:27

該div包含另一個div，其中包含懸停元素。所以，如果主div具有不透明度：0，那麼所有的子元素都是不可見的 – 2014-09-20 22:22:10

視您有它設置，你可以做類似

$('.myimage').on('mouseover', function(){ 
$('.backgroundimage').fadeOut("slow",  function(){ 
complete : function() { 
$('.otherimage').fadeIn(); 
} 
}); 
});

我我的手機上，並沒有嘗試這樣的代碼，它只是給你一個想法，把我的頭頂部。

來源

2014-09-20 21:16:00

平穩變化的背景而徘徊的元素

回答

相關問題