I have a set of headers and sections in an HTML5 file which uses slideToggles to show/hide content. In addition, I’ve got sortable set up to allow the list to be sorted. Even though it’s not really an unordered or ordered list. This all works great.
jsFiddle with working toggles and sortables.
You’ll see, clicking on the “title” will toggle the associated section. Clicking on “Drag” will move the item to the top of the list. Click-dragging on “Drag” will allow sorting items via dragging.
The problem I have is the sequence of the click to move to top. I’d like the item to fade out… prepend.. then fade in. What is happening is Prepend, fadeOut, then fadeIn.
I’ve tried using delay() and stop() with no luck.
Any help would be appreciated.
Although all the code is in the link to the fiddle above, I’m including it here so the question is also self-contained.
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);
});
What I would really love is a smooth animation to the top of the list, but I don’t think that’s possible. So I settled on fade out, move, fade in. But can’t get that working in the correct sequence.
The
fadeOutfunction takes an optional callback parameter, which is to be invoked after the animation has completed.So, to solve your specific problem:
See this jsFiddle update