向下滑动下一个div之前先向上滑动div？

Question

I am using the "super simple JQuery content swapper." 我正在使用“超级简单的JQuery内容交换器”。 I would use one with these animation options already built in, but I am also using a slider, and it appears that script and the slider script are incompatible. 我将使用其中已内置的这些动画选项，但我还将使用滑块，并且看来脚本和滑块脚本不兼容。 This one seems to work, but the issue I'm having is that the first div and the next div open and close at the same time. 这个似乎有效，但是我遇到的问题是第一个div和下一个div同时打开和关闭。

I would like a slideUp, then slideDown effect, but whatever I try results in the same thing: slideUp and slideDown at the same time. 我想要一个slideUp，然后是slideDown效果，但是我尝试的结果都是相同的：slideUp和slideDown在同一时间。 I admit I'm new to JavaScript and JQuery, so this might be a simple solution I am not seeing. 我承认我是JavaScript和JQuery的新手，所以这可能是我没有看到的简单解决方案。 Sorry in advance! 不好意思！

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>Untitled Webpage</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="js/owl.carousel.min.js"></script>
<script src="js/jquery.prettyPhoto.js"></script>
<script type="text/javascript">
$(function(){

    function contentSwitcher(settings){
        var settings = {
           contentClass : '.content',
           navigationId : '#navigation'
        };

        //Hide all of the content except the first one on the nav
        $(settings.contentClass).not(':first').hide();
        $(settings.navigationId).find('li:first').addClass('active');

        //onClick set the active state, 
        //hide the content panels and show the correct one
        $(settings.navigationId).find('a').click(function(e){
            var contentToShow = $(this).attr('href');
            contentToShow = $(contentToShow);

            //dissable normal link behaviour
            e.preventDefault();

            //set the proper active class for active state css
            $(settings.navigationId).find('li').removeClass('active');
            $(this).parent('li').addClass('active');

            //hide the old content and show the new
            $(settings.contentClass).slideUp();
              contentToShow.slideDown();
        });
    }
    contentSwitcher();
});
</script>


<link rel="stylesheet" href="css/owl.carousel.css" />
<link rel="stylesheet" href="css/prettyPhoto.css" />
    <style type="text/css">

#navigation {
    position: fixed; left: 100px; top: 0px; right: 100px;
    padding-top: 15px;
    width: auto; height: 30px;
    background-color: #000;
    color: #fff;
    font-family: ; font-size: 12px;
    text-align: center;
    z-index: 999;
    }

#gallery {
    }

#gallery img {
    width: auto; height: 250px;
    }

#about {
    position: absolute; left: 0px; top: 100px; right: 0px; bottom: 75px;
    width: 100%; height: auto;
    padding: 20px;
    width: 100%;
    background-color: #000;
    color: #fff;
    }

#contact {
    position: absolute; left: 0px; top: 100px; right: 0px; bottom: 75px;
    width: 100%; height: auto;
    padding: 20px;
    width: 100%;
    background-color: #0000FF;
    color: #fff;
    }


    </style>    

</head>
<body>


<div id="navigation"><ul><li><a href="#gallery">GALLERY</a></li><li><a href="#about">ABOUT</a></li><li><a href="#contact">CONTACT</a></li></ul></div>
<div id="gallery" class="content"><div class="owl-carousel"><a class="item" href="" rel="prettyPhoto"><img src="" alt="" /></a>
<a class="item" href="" rel="prettyPhoto"><img src="" alt="" /></a>
<a class="item" href="" rel="prettyPhoto"><img src="" alt="" /></a>
<a class="item" href="" rel="prettyPhoto"><img src="" alt="" /></a></div></div>
<div id="about" class="content">About</div>
<div id="contact" class="content">Contact</div></div>

<script type="text/javascript">
$(document).ready(function () {    
     $("a[rel^='prettyPhoto']").prettyPhoto();

    $('.owl-carousel').owlCarousel({
         items: 3,
         loop: true,
         margin: 10,
         center: true,
         responsive: {
                600:{
                    items: 4
                }
            }
     });
});
</script>
</body>
</html>

EDIT: Despite all the excellent suggestions, it acts funny when I try to implement them. 编辑：尽管有所有出色的建议，但当我尝试实现它们时却表现得很可笑。 Maybe it's not compatible with my coding, or other JavaScripts? 也许与我的编码或其他JavaScript不兼容？ Here is the full thing, I hope it helps. 这是全部，希望对您有所帮助。

Answer 1

call slideDown as a callback from the first animation 从第一个动画中调用slideDown作为回调

$(settings.contentClass).slideUp('fast', function () {
    contentToShow.slideDown();
});

向下滑动下一个div之前先向上滑动div？

问题描述

1 个解决方案

解决方案1
2 2015-02-20 19:38:37

向下滑动下一个div之前先向上滑动div？

问题描述

1 个解决方案

解决方案1 2 2015-02-20 19:38:37

解决方案1
2 2015-02-20 19:38:37