Javascript 使用jQuery向下滑动一个div，向上滑动另一个可见div（基于内容的滑动导航）

我想我会在这里问，因为我似乎找不到一个简单的解决方案或一个适合我需要的解决方案。我的网站目前的问题是如何处理幻灯片动画以及这些动画的时间安排

因此，当用户单击我的导航按钮时，会出现一个面板，根据按下的按钮将内容滑出。如果您单击另一个按钮，它将向上滑动上一个div并向下滑动新的内容面板

我遇到的主要问题是，要么我遇到动画计时问题，因为另一个开始滑动，而另一个是出于某种原因

我所有的内容面板都是同级的…所以这里是我正在使用的jQuery…任何建议都将不胜感激

$('a.navBtn').click(function(){
    var divName = this.name;
    $.when(function(){
        $("#"+divName).siblings().filter(":visible").slideUp("slow");
    }).then(function(){
        $("#"+divName).slideDown("slow");
    })
});

<div id="services">
                    <div class="noise_overlay">
                        <div id="contact"><a href="#" class="navBtn" name="contactContent"><img src="i/contact.png" /></a></div>
                        <div id="linkedin"><a href="#" class="navBtn" name="linkedinContent"><img src="i/linkedin.png" /></a></div>
                        <div id="facebook"><a href="#" class="navBtn" name="facebookContent"><img src="i/facebook.png" /></a></div>
                        <div id="twitter"><a href="#" class="navBtn" name="twitterContent"><img src="i/twitter.png" /></a></div>
                        <div id="flickr"><a href="#" class="navBtn" name="flickrContent"><img src="i/flickr.png" /></a></div>
                    </div>
                </div>

<div id="serviceContent">
            <div id="contactContent" class="contentPane mpHidden">
                <div class="noise_overlay_300">
                    <div id="contactData">
                        <span>contact</span>
                    </div>
                </div>
                <div class="contentFooter"></div>
            </div>
            <div id="linkedinContent" class="contentPane mpHidden">
                <div class="noise_overlay_300">
                    <div id="linkedinData" class="mpCenter">

                    </div>
                </div>
                <div class="contentFooter"><span></span></div>
            </div>
            <div id="facebookContent" class="contentPane mpHidden">
                <div class="noise_overlay_300">
                    <div id="facebookData" class="mpCenter">
                        <span>facebook</span>
                    </div>
                </div>
                <div class="contentFooter"><span></span></div>
            </div>
            <div id="twitterContent" class="contentPane mpHidden">
                <div class="noise_overlay_300">
                    <div id="twitterData" class="mpCenter">
                        <span>twitter</span>
                    </div>
                </div>
                <div class="contentFooter"><span></span></div>
            </div>
            <div id="flickrContent" class="contentPane mpHidden">
                <div class="noise_overlay_300">
                    <div id="flickrData" class="mpCenter">
                        <span>flickr</span>
                    </div>
                </div>
                <div class="contentFooter"><span></span></div>
            </div>
        </div>

$（'a.navBtn'）。单击（函数（）{
var divName=this.name；
$.when（函数（）{
$（“#”+divName）.sides（）.filter（“：visible”）.slideUp（“slow”）；
}).然后（函数（）{
$（“#”+divName）.slideDown（“slow”）；
})
});
接触
脸谱网
啁啾
相片分享

您需要链接动画事件，以便在完成slideUp之前不会发生下滑：

应该是这样的。

这是一个有效的（？）版本。我使用

slideUP

的回调调用

slideDown

编辑：正如Justin所说，我只是有一些代码要测试。：）

编辑2：现在可以看到初始窗格

编辑3：最初什么都没有

我给你做了一个简单的决定。javascript：

$(function() {
    $('a.navBtn').click(function(e) {
        var pane = $(this).attr('name'),
            switchPanes = function(name) {
                if($('.contentPane:visible').attr('id') === name){
                    return;
                }
                if($('.contentPane:visible').length > 0){
                    $('.contentPane:visible').slideUp('fast', function() {
                        $('#' + name).slideDown('medium');
                    });                    
                } else {
                    $('#' + name).slideDown('medium');                    
                }
            };

        switchPanes(pane);
        e.preventDefault();
    });
});

---

你也可以发布你的HTML吗？@Andrew Peackok我用HTML编辑了主要帖子。谢谢，非常感谢！我来看看。您的HTML代码段中没有“a.navBtn”。请您添加准确的标记，以便ppl能够重现该问题吗？@spliter我在内容div上方添加了导航片段。再次感谢嗯，这似乎不起作用……我猜是因为某些东西必须首先可见？这很有效！如果我不希望在开始时看到窗格，该怎么办？如果一开始我没有一个可见的，那么它似乎不起作用。否则它工作得很好！

$(function() {
    $('a.navBtn').click(function(e) {
        var pane = $(this).attr('name'),
            switchPanes = function(name) {
                if($('.contentPane:visible').attr('id') === name){
                    return;
                }
                if($('.contentPane:visible').length > 0){
                    $('.contentPane:visible').slideUp('fast', function() {
                        $('#' + name).slideDown('medium');
                    });                    
                } else {
                    $('#' + name).slideDown('medium');                    
                }
            };

        switchPanes(pane);
        e.preventDefault();
    });
});