我如何讓一個div從右側滑入左側？

-3

如何使用CSS和jQuery將div從右側滑入左側？但我不能使用jQuery中的toggleClass()，因爲我想讓div在滾動出來時滾動下來，如果我使用toggleClass（）滾動條消失。 This is the bug that I get from toggleClass()。我如何讓一個div從右側滑入左側？

這裏我的div代碼：

<div id="menu-home" > 
    <form> 
    <input type="text" class="search rounded" id="input" placeholder="Search.." > 
    </form> 
    <span class="categories">Categories</span> 
    <ul> 
    <li id="menu1">Menu</li> 
    <li id="menu2">Menu</li> 
    <li id="menu3">Menu</li> 
    </ul> 
</div>

這裏的按鈕來觸發菜單

<div class="btn-right button_search" style=""> 
    <img src="img/search_icon.png" /> 
</div>

，在這裏我的CSS

#menu-home-search{ 
    width: 80%; 
    height: 100%; 
    right: 0; 
    padding-top:50px; 
    margin-left: auto; 
    margin-right: 0; 
    overflow: scroll; 
    position: fixed; 
    background: #34a6db; 
    z-index:1000; 
}

來源

2014-06-26 user3773000

「'如果我使用toogleClass（）滾動將disappear'」什麼是你的CSS ？ '.toggleClass'無法自行移除滾動條... – Mooseman

它是div的滾動條，我想在div上添加一個滾動條，當我使用jQuery中的toggleClass時，它會消失，它不是頁面滾動條，而是div滾動條 – user3773000

由於我們沒有你的代碼，我們不能幫助。你使用toggleClass（）的樣子是什麼樣的？ –

繼Rusher的的答案，有生應該工作。這裏有一個jsfiddle

CSS：

#movingImage 
{ 
    margin-left:100%; 

    width:100px; 
    height:50px; 
    background:#ff0000; 
}

HTML：

<body> 
    <div id="movingImage"></div> 
    <a href="#" id="clickMe">Make it Move!</a> 
</body>

JS：

$('#clickMe').click(function(){ 
    $('#movingImage').animate({'marginLeft':0}, 2000); 
});

來源

2014-06-27 05:39:34 Geoff

你爲什麼不使用jQuery動畫？

一些代碼：

$("#clickme").click(function() { 
    $("div").animate({ 
    marginLeft: "-=50" 
    }, 5000}); 
});

來源

2014-06-26 23:37:20 Rusher

對不起，先生，但這不行。 – user3773000

我如何讓一個div從右側滑入左側？

回答

相關問題