開閉時に方向矢印が変化する状態でdivを開閉しようとしますが、開閉時にdivに接続されたままになります。
http://jsfiddle.net/siiimple/GqJj8/8/
理想的には、閉じるときに左にスライドして(速く)、次に右に開くようにします。クローズ「-」は、クローズすると「+」に変わります。
助けてくれてありがとう:)
開閉時に方向矢印が変化する状態でdivを開閉しようとしますが、開閉時にdivに接続されたままになります。
http://jsfiddle.net/siiimple/GqJj8/8/
理想的には、閉じるときに左にスライドして(速く)、次に右に開くようにします。クローズ「-」は、クローズすると「+」に変わります。
助けてくれてありがとう:)
crowjonahの解決策から離れて、あなたの仕様に近いと思う何かを思いついた。
ここでそれをチェックしてください:
まず、展開/縮小ボタンがスライディングdivのピアになるように、divを少し再構築しました。移行中にそれがそれにとらわれたままになるように:
<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:ブロック、相対、フロート、絶対を変更して、ボタンが相対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で変更したのは、不透明度アニメーションを無効にしたことだけですが、元に戻すことはできます。#intro-wrapをターゲットにしないで、代わりに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();
});
J
私は通常、上向き矢印と下向き矢印の両方を含むスプライトシートを作成し、それぞれに異なる背景位置を持つクラスを作成します。トグルで、矢印が開いているか閉じているかをクラスに割り当てます。
また、更新されたフィドルは私にはまったく機能しません。
左右にスライドする簡単な方法は、jQueryUIを使用することです。<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
jQuery自体の直後に追加し、次の例に示す関数を使用します(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ライブラリ全体を1回の小さな使用のためにロードする必要は必ずしもありません。その場合、jQueryのアニメーション関数を使用できます。これがフィドルで、ここにいくつかのコードがあります(既存のクリック機能を維持するため):
$('#content').animate({
opacity: 1,
left: '-900', //to close. use 0 to open
}, 500, function() {}); //500 is the speed. lower is quicker