向下滑動下一個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