添加了打開/關閉箭頭的基本顯示/隱藏div

3

從crowjonah的解決方案行者，用的東西，我覺得是更接近你的規範上來。

看看這裏：

首先，重組的div一點，這樣的擴張/收縮按鈕是滑動格的對等;所以它保持在過渡期間atatched它：

<div id="intro-wrap"> 
<div class="open-intro">+</div> 
<div class="close-intro">-</div> 
<div id="contentWrap"> 
    <h1 class="main-header">Here is a Title</h1> 
    <p class="main-desc">You can write whatever you want about yourself here. You can say you're a superhuman alien ant, arrived from the nether regions of Dwarf-Ant-Dom.</p> 
</div>

然後重構了CSS：1。讓它有點簡單，2：各地塊相對，float和絕對變化，使得按鈕「釘」相對DIV，這就是它：

#intro-wrap { 
    position: relative; 
    z-index: 1; 
    border-left: 25px solid rgba(0,0,0,.2); 
    width: 200px; 
} 
#contentWrap{ 
    background: rgba(0,0,0,.8); 
    padding: 15px 40px 25px 30px; 
} 

#intro-wrap h1 { 
    font-family: "PT Sans Narrow"; 
    font-size: 25px; 
    color: #fff; 
    font-weight: 700; 
    margin-bottom: 0px !important; 
    padding-bottom: 10px; 
} 

#intro-wrap p { 
    line-height: 19px; 
    color: #999; 
} 
.open-intro, 
.close-intro { 
    position:absolute; 
    left:200px; 
    cursor: pointer; 
    width: 25px; 
    height: 25px; 
    z-index: 50; 
    padding-left:15px; 
} 
.open-intro { 
    display: none; 
    background: yellow 
} 
.close-intro { 
    background: red; 
}

我在js唯一改變的是，我禁用了不透明度動畫，但你可以把它帶回來 - 用它我不會針對＃介紹，包裝，你應該同它的目標contentWrap：

$('.open-intro').click(function() { 
    $('#intro-wrap').animate({ 
    //opacity: 1, 
    left: '0', 
    }, 500, function() { 
    // Animation complete. 
    }); 
    $('.open-intro').hide(); 
    $('.close-intro').show(); 
}); 


$('.close-intro').click(function() { 
    $('#intro-wrap').animate({ 
    //opacity: 0.25, 
    left: '-225', 
    }, 400, function() { 
    // Animation complete. 
    }); 
    $('.open-intro').show(); 
    $('.close-intro').hide(); 
});

Ĵ

來源

2012-09-05 21:22:57 Jonathan

+0

這是完美的。由於某種原因，當我將它加載到活動網站時，它似乎不起作用。也許我錯誤地加載了它。 –

+0

你有額外的CSS加載？我會說這是最有可能的：你用自己的重寫上面的一些CSS ......並且DOM結構與上述完全相同？如果你使用chrome（你應該），右鍵單擊contentWrap div和「inspect element」。從這裏，你可以看到div的div是繼承/應用的 – Jonathan

0

http://jsfiddle.net/harmeet_jaipur/ETx7P/

您可以通過效果基本show /了slideDown做到這一點很容易。

，或者你也可以試試這個：

http://jsfiddle.net/harmeet_jaipur/7sRRG/1/

來源

2012-09-05 19:17:09 AnAspiringCanadian

+0

我想我要做的就是讓div滑動到左邊的圖標附加到div上，關閉圖標變爲打開的圖標，當按下時，圖標會向右滑動。這裏更新小提琴：http://jsfiddle.net/siiimple/GqJj8/8/ –

+0

http://jsfiddle.net/harmeet_jaipur/4cLCF/這樣的事情？我猜這可能不是最好的方法，也許你/某人可以改善這一點。 – AnAspiringCanadian

0

我一般對每一個不同的背景位置創建一個包含向上和向下箭頭的精靈表，然後上課。在切換時，只需將該類的箭頭分配給開放或關閉的類。

此外，更新的小提琴根本不適用於我。

來源

2012-09-05 19:22:58

0

左右滑動的簡單方法是使用jQuery UI！ jQuery的本身之後只需添加<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>和使用函數，如在這個例子中（我分叉Harmeets）：http://jsfiddle.net/qEBnG/1/（編輯：甚至更好：http://jsfiddle.net/qEBnG/2/）

然後，只需填寫您的選擇和參數的函數調用：

$('.open-button').click(function() { 
    $('#content').show("slide", { direction: "left" }, 500); 
    $('.open-button').hide(); 
    $('.close-button').show(); 
}); 

$('.close-button').click(function() { 
    $('#content').hide("slide", { direction: "left" }, 100); 
    $('.open-button').show(); 
    $('.close-button').hide(); 
});

您可以修改CSS一點，纔能有+和 - 按鍵可以相互替換，如果你願意的話。

正如josh所指出的那樣，您不一定要加載整個jQuery UI庫只是一個小用途，在這種情況下，您可以使用jQuery的animate函數。這裏的a fiddle，這裏的一些代碼（在現有的點擊功能棒）：

$('#content').animate({ 
    opacity: 1, 
    left: '-900', //to close. use 0 to open 
}, 500, function() {}); //500 is the speed. lower is quicker

來源

2012-09-05 19:24:53 crowjonah

+2

jQuery Ui確實有很多內置的功能，但它包含一個非常小巧的文件，當你在庫中使用的不只是一個東西時，它是非常明智的。如果他已經在使用它，這肯定是正確的路線。 –

+0

沒錯，喬希。如果你想爲整個圖書館騰出空間，你可以隨時[自定義你的下載]（http://jqueryui.com/download）。否則，還有左右滑動事物的[CSSey方式]（http://stackoverflow.com/questions/596608/slide-right-to-left）。 – crowjonah

添加了打開/關閉箭頭的基本顯示/隱藏div

回答

相關問題