Question

我在HTML5文件中有一组标题和部分，它使用slideToggles显示/隐藏内容。此外，我已经进行了可排序设置以允许对列表进行排序。即使它不是真正的无序或有序列表。这一切都很有效。

jsFiddle with working toggles and sortables.

您会看到，点击＆＃34;标题＆＃34;将切换相关部分。点击＆＃34;拖动＆＃34;将项目移动到列表顶部。点击拖动＆＃34;拖动＆＃34;将允许通过拖动对项目进行排序。

我遇到的问题是点击的顺序移到顶部。我喜欢淡出的项目... prepend ..然后淡入。发生的事情是Prepend，fadeOut，然后fadeIn。

我尝试过使用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">&raquo; item &laquo;</p>
            <p class="new">&raquo; item &laquo;</p>
            <p class="new">&raquo; item &laquo;</p>
            <p class="new">&raquo; item &laquo;</p>
            <p class="new">&raquo; item &laquo;</p>
            <p class="new">&raquo; item &laquo;</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">&raquo; item &laquo;</p>
            <p class="new">&raquo; item &laquo;</p>
            <p class="new">&raquo; item &laquo;</p>
            <p class="new">&raquo; item &laquo;</p>
            <p class="new">&raquo; item &laquo;</p>
            <p class="new">&raquo; item &laquo;</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">&raquo; item &laquo;</p>
            <p class="new">&raquo; item &laquo;</p>
            <p class="new">&raquo; item &laquo;</p>
            <p class="new">&raquo; item &laquo;</p>
            <p class="new">&raquo; item &laquo;</p>
            <p class="new">&raquo; item &laquo;</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">&raquo; item &laquo;</p>
            <p class="new">&raquo; item &laquo;</p>
            <p class="new">&raquo; item &laquo;</p>
            <p class="new">&raquo; item &laquo;</p>
            <p class="new">&raquo; item &laquo;</p>
            <p class="new">&raquo; item &laquo;</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);
    });

我真正喜欢的是列表顶部的平滑动画，但我不认为这是可能的。所以我决定淡出，移动，淡入。但是不能以正确的顺序工作。

Answer 1

fadeOut函数接受一个可选的回调参数，该参数将在动画完成后调用。

所以，要解决你的具体问题：

    $(stuff)
        .fadeOut(500, function() {
            $(stuff).prependTo('.listing')
                    .fadeIn(500);
        })

请参阅this jsFiddle update

jQuery Sortables，项目序列

1 个答案: