0

左から右にdivをスライドインおよびスライドアウトする方法はありますか。ユーザーは「clickthis」をクリックして切り替える必要があります。

例のCSS:

.container{width:100px; position:absolute; left:-70px;}
.container .open{left:0px;}
.button{display:block; top:0px; right:0px; width:20px; height:20px;position:relative;

HTML の例:

<div class="container" id="slide1">
    <div class="button" id="clickthis"></div>
</div>
4

4 に答える 4

2

とを使用して、要素をスライドインおよびスライドアウトshow()できますhide()

例えば：

$("<your-element>").show("slide", { direction: "left" }, 100);

と

$("<your-element>").hide("slide", { direction: "left" }, 100);

詳細については、この質問を参照してください。

このチュートリアルを見て、要素をさまざまな方向にスライドさせる方法を学習できます。

于 2012-11-21T13:09:31.093 に答える
0

はい、でも「clickthis」をクリックすると、div「slide1」を閉じたときにも非表示になりますよね？

さて、あなたの質問を理解した場合、右から左にスライドしてdivを閉じるには、次のようなコードを実装する必要があります。

$(document).ready(function() {
  $('#clickthis').click(function() {
    $('#slide1').animate({width: 'toggle'});
  });
});

とにかく、さまざまなスライド効果の優れたチュートリアルがあります：http: //www.learningjquery.com/2009/02/slide-elements-in-different-directions

于 2012-11-21T13:13:16.603 に答える
0

これを使用できます（ただし、jQueryが必要です）：

$('#clickthis').click(function() {
    $('#slide1').toggleClass('open');
});
于 2012-11-21T13:10:13.017 に答える
0

jQuery トグル機能を使用して、スライド イン スライド アウトすることができます。

$( ".button" ).click(function() {
    $( "div" ).toggle( "slide", { direction: "left" }, "slow" );
});

たとえば、参照してください:- Jquery スライドイン/スライドアウト

于 2012-11-21T13:25:27.603 に答える