在Wordpress中簡單可靠的淡入淡出頁面轉換

我正在網站上工作，我還有最後一件事要做。我正在嘗試創建頁面轉換。過渡需要淡化並淡入下一頁。我嘗試了很多腳本，無法讓它們工作。我嘗試了幾個不同的插件，其中一個插件工作正常，但我的幻燈片沒有顯示出來。有沒有簡單的CSS代碼或JS代碼？我想過爲DIV編寫一個轉換CSS代碼，但我不知道如何去做。任何簡單的建議？在Wordpress中簡單可靠的淡入淡出頁面轉換

的html代碼：

<body> 
    <div class="navigation"> 
    <ul> 
    <li><a href="/">Home</a><li> 
    <li><a href="about">About</a></li> 
    </ul> 
</div> 

<div id="FADE"> 
    <!----CONTENT THAT NEEDS TO FADE UPON CLICKING ABOUT US PAGE---> 
</div> 
</body>

來源

2013-08-29 user2593041

使用jQuery你可以使用.fadeOut()和.fadeIn()

對於CSS：

這是很難說會究竟如何融入你的代碼，但我會建議只創建一個.fade div，它覆蓋整個頁面，您可以動態添加和刪除以創建轉場。

.fade{ 
    position:fixed; 
    z-index:100000; 
    top:0; 
    bottom:0; 
    width:100%; 
    background:#fff; 
    opacity:1; 
    transition:opacity 0.5s ease; 
} 

.fade.hidden { 
    opacity:0; 
    z-index:0; 
    width:0; 
}

然後您可以簡單地切換「.hidden」類來顯示轉換。這應該起作用，但可能不符合你的想法。

來源

2013-08-29 11:30:11 robooneus

你會怎麼寫JS？ – user2593041

可以像這樣的工作？（「。fade」）。fadeIn（3000）;。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。點擊（功能（事件）{ event.preventDefault（）; link = this.href; $（「＃fade」）。fadeOut（3000，function（）{ window.location = link; }）; }）; – user2593041

很難給你任何具體的幫助，而實際上並不知道你如何在一個頁面之間移動。你只是使用正常的鏈接，但想要淡出發生，使它看起來像你不是，或者你實際上是加載一個新的頁面？ – robooneus

在Wordpress中簡單可靠的淡入淡出頁面轉換

回答

相關問題