Question

想我会在这里问，因为我似乎找不到符合我需求的简单解决方案或解决方案。我现在在网站上遇到的问题是处理幻灯片动画以及这些动画的时间安排。

因此，当用户点击我的某个导航按钮时，会有一个面板根据按下的按钮滑出内容。如果您单击另一个按钮，它将向前滑动前一个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>

Answer 1

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

http://api.jquery.com/slideUp/

 $("#"+divName).siblings().filter(":visible").slideUp("slow", function() {
     $("#"+divName).slideDown("slow");
 });

应该是那样的。

Answer 2

这是一个工作（？）版本。我使用slideUP的回调来调用slideDown。

http://jsfiddle.net/yazYF/

编辑：就像Justin说的那样，我只需要一些代码来测试。：）

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

http://jsfiddle.net/yazYF/1/

编辑3 ：最初没什么......

http://jsfiddle.net/yazYF/2/

Answer 3

我为你做了一个简单的jQuery snippet。 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();
    });
});

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

3 个答案: