1
スライドショーを使用してコンテンツを表示/非表示にするHTML5ファイルに、一連のヘッダーとセクションがあります。また、リストをソートできるようにソート可能な設定をしています。それは実際には順序付けられていない、または順序付けされたリストではありません。これはすべて素晴らしいです。jQuery並べ替え可能な項目の並び
jsFiddle with working toggles and sortables.
あなたが「タイトル」をクリックし、表示されます関連するセクションを切り替えます。 「ドラッグ」をクリックすると、その項目がリストの一番上に移動します。 「ドラッグ」をクリックしてドラッグすると、アイテムをドラッグして並べ替えることができます。
問題は、クリックの順序が上に移動することです。アイテムをフェードアウトさせたいのですが...プリフェンドしてからフェードインしてください。プリフェンド、フェードアウト、フェードインが起こります。
delay（）とstop（）を使ってみました。
ご協力いただければ幸いです。
すべてのコードは上記のフィドルへのリンクにありますが、私はここに含めていますので、質問も自己完結しています。私は本当に、リストの一番上にスムーズなアニメーションで大好きだが、私は考えていない何
HTML
<div id="container">
<div class="listing">
<div class="item">
<header class="shead">
<h1><span class="drag">DRAG</span><a href="#hold1" class="slide">title 1</a></h1>
</header>
<section id="hold1" class="eps hidden">
<p class="new">» item «</p>
<p class="new">» item «</p>
<p class="new">» item «</p>
<p class="new">» item «</p>
<p class="new">» item «</p>
<p class="new">» item «</p>
</section>
<div class="clear"></div>
</div> <!-- //item -->
<div class="item">
<header class="shead">
<h1><span class="drag">DRAG</span><a href="#hold2" class="slide">title 2</a></h1>
</header>
<section id="hold2" class="eps hidden">
<p class="new">» item «</p>
<p class="new">» item «</p>
<p class="new">» item «</p>
<p class="new">» item «</p>
<p class="new">» item «</p>
<p class="new">» item «</p>
</section>
<div class="clear"></div>
</div> <!-- //item -->
<div class="item">
<header class="shead">
<h1><span class="drag">DRAG</span><a href="#hold3" class="slide">title 3</a></h1>
</header>
<section id="hold3" class="eps hidden">
<p class="new">» item «</p>
<p class="new">» item «</p>
<p class="new">» item «</p>
<p class="new">» item «</p>
<p class="new">» item «</p>
<p class="new">» item «</p>
</section>
<div class="clear"></div>
</div> <!-- //item -->
<div class="item">
<header class="shead">
<h1><span class="drag">DRAG</span><a href="#hold4" class="slide">title 4</a></h1>
</header>
<section id="hold4" class="eps hidden">
<p class="new">» item «</p>
<p class="new">» item «</p>
<p class="new">» item «</p>
<p class="new">» item «</p>
<p class="new">» item «</p>
<p class="new">» item «</p>
</section>
<div class="clear"></div>
</div> <!-- //item -->
</div><!-- //listing -->
</div>
CSS
#container { padding: 30px; }
a.slide {
display: block;
font: bold 18px Verdana, sans-serif;
text-decoration: none;
color: #f00;}
.shead {
background: #eee;
padding: 5px;
border: 1px solid #aaa;}
.shead:hover{
display: block;
background: #aaa;
-webkit-transition: .3s;}
.hidden { display: none; }
.shead h1 {
cursor: pointer;
font-weight: bold;
padding: 8px;
text-transform: uppercase;}
.eps {
background: #aaa;
border: 1px solid #aaa;
border-top: none;}
.eps p {
font-size: 12px;
padding: 5px 10px;
background: #eee;
margin: 1px 0;}
.drag {
float: right;
font-weight: normal;
cursor: move;
position: relative;}
.clear { clear: both; }
.place { background: #f00; }
jqueryの
$("a.slide").click(function() {
var eplink = $(this).attr("href");
$(eplink).slideToggle(500, "easeInOutSine");
return false;
});
$('#container').sortable({
items: '.item',
axis: 'y',
cursor: 'move',
connectWith: '.shead',
forceHelperSize: true,
forcePlaceholderSize: true,
handle: '.drag',
placeholder: 'place',
scroll: true,
delay: 200,
tolerance: 'pointer'
});
$('.drag').disableSelection();
$('.drag').click(function(event) {
var stuff = $(this).closest('.item');
$(stuff)
.fadeOut(500)
.prependTo('.listing')
.fadeIn(500);
});
それは可能です。だから私はフェードアウト、移動、フェードインを決めましたが、正しいシーケンスで動作させることはできません。
を参照してください。 'と' fadeOut'と 'fadeIn'の代わりに' slideDown'を使います。やってみなよ。 :-) –
実際に私はいくつかの追加の編集を行った:)更新されたフィドル - > http://jsfiddle.net/NotInUse/uvPS9/4/ – Scott
いいね。幸運は、スライド上の「スナップバック」を防止する方法を考え出すことです。 –