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>

编辑：尽管有各种优秀的建议，但当我尝试实施它们时它会很有趣。也许它与我的编码或其他JavaScripts不兼容？这是完整的事情，我希望它有所帮助。

Answer 1

将slideDown称为第一个动画的回调

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

在下滑下滑之前滑动div？

1 个答案: