過渡效果添加到jQuery的幻燈片

我創建了一個小滑塊，http://jsfiddle.net/dGnMX/，過渡效果添加到jQuery的幻燈片

它工作得很好，扔徘徊的鏈接，圖像變化。

現在我需要添加一點點的效果，當圖像的變化，我想這：

$("#first").hover(function() { 
    $("body").css({ 
     "background": 'url("http://www.thatsreallypossible.com/wp-content/uploads/2012/12/Space-Colonialisation.jpg")', 
     MozTransition : 'opacity 2s ease-in-out', 
     transition  : 'opacity 2s ease-in-out' 
    }); 
});

，但我不能看到任何效果，任何人都可以幫我嗎？

來源

2014-02-08 user3235284

MozTransition是不正確的，應該是-moz-transition。此外，我不認爲你瞭解轉換是如何工作的，你不要在懸停時添加這個屬性，而應該存在於你的基礎CSS中。您在懸停時更改的唯一內容是您爲轉換指定的屬性，在本例中爲opacity。

CSS

body { 
    background: url(...); 
    opacity: 0.5; 
    transition: opacity 2s linear; 
}

$('#first').hover(
    function(){ $('body').css('opacity', 1.0); }, 
    function(){ $('body').css('opacity', 0.5); } 
);

來源

2014-02-08 11:24:07 slash197

...添加到代碼，你會看到發生什麼事.. =>控制檯 – user3235284

看一看更新版本：http://jsfiddle.net/dGnMX/38/

一種方式是在後臺進行的div元素。

<div id="background1"></div> 
<div id="background2"></div> 
<div id="background3"></div>

與下面的CSS

#background1, #background2, #background3 { 
    position: absolute; 
    top: 0; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    z-index: -100; 
} 

#background1 { 
    background-image: url("http://static.bbc.co.uk/solarsystem/img/ic/640/collections/space_exploration/space_exploration_large.jpg") 
} 

#background2 { 
    background-image: url("http://i.telegraph.co.uk/multimedia/archive/02179/Milky-Way_2179177b.jpg") 
} 

#background3 { 
    background-image: url("http://www.thatsreallypossible.com/wp-content/uploads/2012/12/Space-Colonialisation.jpg") 
}

然後使用jQuery的動畫功能可顯示/隱藏它們。這個例子簡單地淡化了背景。例如第一個背景：

$("#first").hover(function() { 
    $('#background1').animate({opacity: 1}, 'slow'); 
    $('#background2').animate({opacity: 0}, 'slow'); 
    $('#background3').animate({opacity: 0}, 'slow'); 
});

見jQuery的文檔使用其他影響：

來源

2014-02-08 11:40:30

過渡效果添加到jQuery的幻燈片

回答

相關問題