1

我正在尝试为我正在处理的主题组合一个菜单，但是我无法让它的一部分工作。具体来说，我希望能够单击一个链接并让一个 div 向下滑动然后淡入，然后单击另一个链接并使该 div 淡出并滑出，然后一个新的 div 滑动并淡入其位置。目前，当我使用相同的链接隐藏 div 以显示它时，它可以工作，但不同的链接只是将 div 堆叠在一起。

这是我正在使用的代码：

jQuery.fn.fadeThenSlideToggle = function () {
    if (this.is(":hidden")) {
        return this.slideDown(500, "linear").fadeTo(500, 1, "linear");
    } else {
        return this.fadeTo(500, 0, "linear").slideUp(500, "linear");
    }
};
$(document).ready(function () {
    $('#toggleabout').click(function () {
        $('#about').fadeThenSlideToggle();
        return false;
    });
    $('#toggleprojects').click(function () {
        $('#projects').fadeThenSlideToggle();
        return false;
    });
    $('#toggleconnect').click(function () {
        $('#connect').fadeThenSlideToggle();
        return false;
    });
    $('#toggleexchange').click(function () {
        $('#exchange').fadeThenSlideToggle();
        return false;
    });
    $('#toggleextras').click(function () {
        $('#extras').fadeThenSlideToggle();
        return false;
    });
    $('#togglesearch').click(function () {
        $('#search').fadeThenSlideToggle();
        return false;
    });
});

在我设计的以前的菜单中，我使用了这样的东西：

$('#toggleconnect').click(function () {
    $(".menubox:not(#connect)").slideUp(500, "linear");
    $('#connect').delay(600).slideToggle(500, "linear");
    return false;
});

当只调用一个效果时，这很好用，但是我想在这里做的事情的复杂性似乎打破了这一点。我已经尝试了一些东西，但似乎没有什么对我有用。任何帮助，将不胜感激。

代码笔

4

1 回答 1

1

尝试

jQuery.fn.fadeThenSlideToggle = function(opts) {
    opts = opts || {};

    var hide = function(el, complete){
        var p1, p2;
        el.finish();
        p1= el.fadeTo(500, 0, "linear").promise();
        p2 = el.slideUp(500, "linear").promise();
        $.when(p1, p2).done(complete)
    }
    var show  = function(el, complete){
        var p1, p2;    
        el.finish();
        p1 = el.slideDown(500, "linear").promise();
        p2 = el.fadeTo(500, 1, "linear").promise();
        $.when(p1, p2).done(opts.complete)
    }

    if (this.is(":hidden")) {
        if(opts.divs){
            hide(opts.divs.filter(':visible').not(this), $.proxy(function(){
                show(this, opts.complete)
            }, this))
        } else {
            show(this, opts.complete)
        }
    } else {
        hide(this, opts.complete)
    }


    return this;
};
$(document).ready(function() {
    var divs = $('#about, #projects, #connect, #exchange, #extras, #search').hide()
    $('#toggleabout').click(function() {
        $('#about').fadeThenSlideToggle({
            divs: divs
        });
        return false;
    });
    $('#toggleprojects').click(function() {
        $('#projects').fadeThenSlideToggle({
            divs: divs
        });
        return false;
    });
    $('#toggleconnect').click(function() {
        $('#connect').fadeThenSlideToggle({
            divs: divs
        });
        return false;
    });
    $('#toggleexchange').click(function() {
        $('#exchange').fadeThenSlideToggle({
            divs: divs
        });
        return false;
    });
    $('#toggleextras').click(function() {
        $('#extras').fadeThenSlideToggle({
            divs: divs
        });
        return false;
    });
    $('#togglesearch').click(function() {
        $('#search').fadeThenSlideToggle({
            divs: divs
        });
        return false;
    });
});

演示：小提琴

于 2013-08-08T03:56:25.237 回答