мне нужен способ переключения между двумя контейнерами div с анимацией ширины

Question

У меня есть два контейнера div с содержимым в них и две кнопки вне контейнера, например:

<div id="containers">
    <div id="container_1">
        awesome container 1 content
    </div>
    <div id="container_2">
        awesome container 2 content
    </div>
</div>

<div id="container_1_button">
    Click me to open container 1
</div>
<div id="container_2_button">
    Click me to open container 2
</div>

Мне нужно иметь возможность анимировать ширину и влево: чтобы эффект скольжения контента изслева при нажатии.Но только один может быть открыт одновременно.Код psuedo будет: IE: if Container 1 width > 0 set width:0, set left:0 и то же самое для контейнера 2. Таким образом, если кто-то нажимает на кнопку 2, когда контейнер 1 открыт, он сворачивает контейнер 1, а затем открывает контейнер 2 и наоборот.

У меня естьдобиться анимации положения ширины / слева на одном элементе с помощью следующего jquery:

//the Jquery collapsible left hand sidebarfor mapit
$('#map_sidebar_button').toggle(function(){
    collapseSidebarLeft();
    $('#sidebar_left_map').animate({width:0}, 'fast');
    $('.button_container').animate({left:0}, 'fast');
    $('#map_sidebar_button').removeClass('sidebar_left_button_toggle');
},function(){
    $('#sidebar_left_map').animate({width:260}, 'fast');
    $('.button_container').animate({left:260}, 'fast');
        // add a class to change the background coloring and border of the button
    $('#map_sidebar_button').addClass('sidebar_left_button_toggle');
});

Вы можете увидеть пример сайта, на котором мне это нужно реализовать, здесь: http://demo.mapitusa.com theкнопки левой боковой панели ..

Answer 1

Мой подход заключается в использовании метода .each() и привязке (одной) click к каждой кнопке с одинаковым class и в зависимости от того, на какую кнопку вы нажали (в зависимости от ее индекса ) затем выберите удивительный контейнер для отображения.

В этом сценарии оба удивительных контейнера тоже будут иметь одинаковый class и будут скрыты от видимости с помощьюотрицательная маржа при том же значении их width, почему?потому что таким образом они не будут показывать странный эффект, создаваемый при анимации width (элементы внутри контейнера будут выглядеть как плавающие и упорядоченные во время анимации) ... так что используйте этот html:

<div id="containers">
 <div id="container_1" class="awesome">awesome container 1 content</div>
 <div id="container_1_button" class="buttonsContainer"><a class="button" href="javascript:;">open 1</a></div>
 <div class="clear"></div><!--used in my example to separate floating containers-->
 <div id="container_2" class="awesome">awesome container 2 content</div>
 <div id="container_2_button" class="buttonsContainer"><a class="button" href="javascript:;">open 2</a></div>
</div>

css для обоих контейнеров и родительского элемента

#containers {
 position: relative;
}
#containers .awesome {
 width: 300px; /* or whatever */
 margin-left: -300px; /* negative value of the width */
 overflow: hidden;
 float: left; /* to illustrate my example */
 display: block; /* if needed */
 /* etc other container properties */
}

затем jQuery, в котором мы присваиваем один click одному и тому же селектору (общий class обеих кнопок)

$(document).ready(function(){
 $(".button").each(function(i){
  var selector = $(this); // useful to refer to 'this' inside of any nested function
  selector.on("click", function(){
   if($(".awesome").eq(i).hasClass('visible')){
    $(".awesome").eq(i).animate({'marginLeft':-300},{ queue:false, duration: 200}).removeClass('visible');
   } else {
    // collapse all if any
    $(".awesome").animate({'marginLeft': -300},{ queue:false, duration:200, complete: function(){
      // remove to all the class "visible" if any
      $(".awesome")
       .removeClass('visible')
       // animate the corresponding (i) container and add class="visible"
       .eq(i).animate({'marginLeft':0},{ queue:false, duration:600})
       .addClass('visible');
     } // complete
    }); // animate
   } // if else
  }); //on
 }); //each
}); //ready

Обратите внимание, что мы используем опцию complete обратного вызова .animate(), поэтому следующая анимация будет выполняться до тех пор, пока не будет завершена первая, в этом случае второй контейнер будет отображаться только до тех пор, пока не свернется первый.

Вы можете увидеть это здесь для лучшего понимания эффекта.

Answer 2

Поскольку элементы div по умолчанию display : block, нам нужно изменить их свойство display, чтобы они сидели рядом друг с другом, а не на своих собственных линиях. display : inline-block сделает свое дело, но имейте в виду, что для IE7 вам нужен этот хак: *display : inline; zoom : 1;. Кроме того, overflow : hidden имеет важное значение, поэтому содержимое будет скрыто при анимации слайда.

JS -

$(function () {
    $('#container_1_button').on('click', function () {

        //button 1 was clicked so animate container_1 into view
        $('#container_1').stop().animate({
            width : 200
        }, 1000);

        //animate container_2 out of view
        $('#container_2').stop().animate({
            width : 0
        }, 1000);
    });
    $('#container_2_button').on('click', function () {

        //animate container_2 into view
        $('#container_2').stop().animate({
            width : 200
        }, 1000);

        //animate container_1 out of view
        $('#container_1').stop().animate({
            width : 0
        }, 1000);
    });
});

CSS -

#containers div {
    display  : inline-block;
    position : relative;
    overflow : hidden;
    height   : 40px;
}
#container_1 {
    width : 200px;
}
#container_2 {
    width : 0px;
}

Демо: http://jsfiddle.net/RBmLt/

Обратите внимание, что .on() является новым в jQuery 1.7 и в этом случае аналогично использованию .bind().