Сдвиньте div вверх, прежде чем сдвинуть следующий div вниз?

Я использую «суперпростую программу обмена контентом 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? Вот полный текст, надеюсь поможет.


javascript jquery slidedown slideup
person 8008    schedule 20.02.2015    source источник
comment
Попробуйте поместить метод slideDown() в параметр complete метода slideUp().   -  person JFK    schedule 20.02.2015
comment
Это все еще действовало немного смешно. Я включил весь код, может быть, что-то с ним взаимодействует?   -  person 8008    schedule 20.02.2015
comment
Вы можете попытаться включить slideDown() в метод setTimeout(), чтобы дать время slideUp() закончить свою анимацию.   -  person JFK    schedule 21.02.2015
comment
Это сработало! Большое спасибо!   -  person 8008    schedule 21.02.2015

Ответы (1)


arrow_upward
2
arrow_downward

вызовите slideDown как обратный вызов из первой анимации

$(settings.contentClass).slideUp('fast', function () {
    contentToShow.slideDown();
});
person Joe Fitter    schedule 20.02.2015
comment
Это то, что я нашел при поиске, но по какой-то причине это не работает с моим кодом. Это действует немного забавно... - person 8008; 20.02.2015
comment
хм, вам нужно будет включить скорость, если вы делаете это таким образом, или вы можете сделать slideUp({ complete: function () { contentToShow.slideDown(); } }) - person Joe Fitter; 20.02.2015
comment
Все еще забавно... Я включил весь код, надеюсь, он поможет еще немного. - person 8008; 20.02.2015