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

Question

我正在使用“超级简单的JQuery内容交换器”。 我将使用其中已内置的这些动画选项，但我还将使用滑块，并且看来脚本和滑块脚本不兼容。 这个似乎有效，但是我遇到的问题是第一个div和下一个div同时打开和关闭。

我想要一个slideUp，然后是slideDown效果，但是我尝试的结果都是相同的：slideUp和slideDown在同一时间。 我承认我是JavaScript和JQuery的新手，所以这可能是我没有看到的简单解决方案。 不好意思！

<!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>

编辑：尽管有所有出色的建议，但当我尝试实现它们时却表现得很可笑。 也许与我的编码或其他JavaScript不兼容？ 这是全部，希望对您有所帮助。

Answer 1

从第一个动画中调用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