Question

我正在尝试为我正在处理的主题组合一个菜单，但是我无法让其中的一部分工作。具体来说，我希望能够点击一个链接并让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;
});

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

CodePen

Answer 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;
    });
});

演示：Fiddle

如何隐藏切换的div并在其位置显示另一个

CodePen

1 个答案: