淡入淡出Divs

Question

我正在嘗試構建一個基本上是一頁的網頁，但是具有四個“隱藏”的div，當您單擊底部的菜單按鈕時，它們會淡入和淡出可見性。

我想在每個div的頂部放置一個“關閉”按鈕，以便您可以“關閉”該div-但是，如果在單擊新菜單項時div仍然自行淡出，那就太好了。 到目前為止，我已經使用css和html創建了div框和鏈接，但是當涉及到javascript時，我絕對是新手。 這是我到目前為止的代碼

HTML：

<div class="menu">
    <a class="portfolio" href="http://www.google.com"> Portfolio </a> | <a  class="aboutme" href="http://www.google.com"> About Me </a> | <a class="education" href="http://www.google.com"> Education</a> | <a class="contact" href="http://www.google.com"> Contact</a>
</div>
<div>`

（注意：我只將google用作鏈接目標，因為我不知道還要輸入什么）。

CSS：

.aboutmewindow
{
    width:583px;
    height:557px;
    border-bottom-style:dashed;
    position:absolute;
    top:0px;
    z-index:2;  
}

.portfoliowindow
{
    width:583px;
    height:557px;
    border-bottom-style:dashed;
    position:absolute;
    top:0px;
    z-index:2;  
}

.educationwindow
{
    width:583px;
    height:557px;
    border-bottom-style:dashed;
    position:absolute;
    top:0px;
    z-index:2;  
}

.contactwindow
{
    width:583px;
    height:557px;
    border-bottom-style:dashed;
    position:absolute;
    top:0px;
    z-index:2;  
}`

我已經嘗試過自己編寫一些javascript，但是到現在為止，這已經超出了我的理解范圍。 不過，我將繼續閱讀教程，所以希望我能掌握其中的內容。

有人有什么建議嗎？ 還是好的教程？

謝謝！

Answer 1

您可以嘗試這是一個簡單的示例，但是沒有所有標記和代碼，您可以明白這個主意..需要jQuery

http://jsfiddle.net/YnzRV/9/

$(function(){

    $("#main > .box").not(":first").hide();

    $(".menu").on("click", "a", function(){

        var $this = $(this),
            dataBox = $this.data("box");

        $("#main > .box").hide();
        $("."+dataBox).fadeIn(400);

        return false;
    });

});

如果您檢查jsfiddle，您將看到我如何添加通過點擊處理程序傳遞的數據屬性，以告訴該用戶使用數據屬性顯示哪個div

Answer 2

您可以使用fadeIn()或fadeOut() 。

像這樣使用它：

$('selector').fadeIn(); // you can use time in ms, inside ()

同樣，您也可以使用fadeOut 。 但是請記住，您已將最新版本的jQuery鏈接到您的網頁。

鏈接：

http://jquery.com

Answer 3

這是一個過時的教程（2012年8月），向您顯示了淡入，淡出和將它們淡化為特定不透明度所需的HTML，CSS和JavaScript。

http://www.mkyong.com/jquery/jquery-fadein-fadeout-and-fadeto-example/

您實質上是在嘗試了解以下內容：

• .fadeIn()
• .fadeOut()
• .fadeTo()
• jQuery的.click()處理程序
• jQuery的.on()處理函數