jQuery - анимация «левого» положения абсолютно позиционированного div при открытии скользящей панели

У меня есть скрытая панель с левой стороны экрана, которая появляется при щелчке «вкладки», расположенной в левой части экрана. Мне нужно, чтобы панель скользила поверх существующего содержимого страницы, и мне нужна вкладка, чтобы перемещаться вместе с ней. и так оба абсолютно позиционированы в css. Все работает нормально, за исключением того, что мне нужно, чтобы вкладка (и, следовательно, вкладка-контейнер) перемещалась влево вместе с панелью, когда она открывается, поэтому она кажется застрявшей в правой части панели. Это относительно просто при использовании плавающих элементов, но, конечно, это влияет на макет существующего контента и, следовательно, на абсолютное позиционирование. Я попытался анимировать левую позицию панели-контейнера (см. документированную функцию jquery), но не могу заставить ее работать.

Это пример исходного кода, который я изменил, как я могу заставить кнопку/вкладку скользить?

http://www.iamkreative.co.uk/jquery/slideout_div.html

Мой HTML

<div><!--sample page content-->
    <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et 
    </p>
</div>

<div id="panel" class="height"> <!--the hidden panel -->
    <div class="content">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore</p>
    </div>  
</div>

<!--if javascript is disabled use this link-->
<div id="tab-container" class="height">
    <a href="#" onclick="return()">
        <div id="tab"><!-- this will activate the panel. --></div> 
    </a>
</div>

Мой jQuery

$(document).ready(function(){

$("#panel, .content").hide(); //hides the panel and content from the user

$('#tab').toggle(function(){ //adding a toggle function to the #tab
    $('#panel').stop().animate({width:"400px", opacity:0.8}, 100, //sliding the #panel to 400px

    // THIS NEXT FUNCTION DOES NOT WORK -->
    function() {
        $('#tab-container').animate({left:"400px"} //400px to match the panel width
        });

    function() {
        $('.content').fadeIn('slow'); //slides the content into view.
        });  
},

function(){ //when the #tab is next cliked
    $('.content').fadeOut('slow', function() { //fade out the content 
        $('#panel').stop().animate({width:"0", opacity:0.1}, 500); //slide the #panel back to a width of 0
    });
   });

  });

а это css

#panel {
position:absolute;
left:0px;
top:50px;
background-color:#999999;
height:500px;
display:none;/*hide the panel if Javascript is not running*/
}

#panel .content {
width:290px;
margin-left:30px;
}

#tab-container{
position:absolute;
top:20px;
width:50px;
height:620px;
background:#161616;
}

#tab {
width:50px;
height:150px;
margin-top:100px;
display:block;
cursor:pointer;
background:#DDD;
}

Большое спасибо


jquery sliding panel jquery-animate
person Matt    schedule 19.04.2010    source источник

Ответы (2)


arrow_upward
10
arrow_downward

Я снова начал с нуля и прочитал документацию по jQuery, хе-хе. Я поместил и панель, и кнопку в абсолютно позиционированный div, плавая влево. Присвойте контейнеру отрицательное левое положение, а затем поместите переключатель jQuery на кнопку.

$('#button').toggle(function() {

    $('#slider').animate({
        left: '+=200'
        }, 458, 'swing', function() {

        // Animation complete. CALLBACK?

    });

}, function() {

    $('#slider').animate({
        left: '-=200'
        }, 458, 'swing', function() {

        // Animation complete. CALLBACK?

    });

});
person Matt    schedule 19.04.2010

arrow_upward
0
arrow_downward

Я наткнулся на этот пост, пытаясь выполнить ту же задачу.

К сожалению, ответ Мэтта больше не будет работать с последней версией jQuery. На момент написания ответа Мэтта в jQuery было две функции .toggle. В то время, когда я пишу это, тот, который использовался в его ответе, устарел. Если используется код Мэтта, весь div просто исчезнет, ​​кнопка и все остальное. (И если вы похожи на меня, это будет очень запутанно, пока вы не покопаетесь в документации API и не узнаете об изменении)

Мне удалось заставить мою функциональность работать со следующим кодом:

HTML:

<div id="siteMap">
 <div id="mapButton">Site Map</div>
 <div id="theMap">[The Site Map Goes Here]</div>
</div>

CSS (я знаю, что это еще не очень чисто):

#siteMap {
  width:500px;
  position:fixed;
  left:-500px;
  top:157px;
  display:block;
  color:#FFF;
  z-index:2;
  opacity: 0.95;
}
#siteMap #mapButton {
  display:block;
  color:#333;
  background-color:#ACACAC;
  padding:2px 5px;
  height:20px;
  width:70px;
  text-align:center;
  position:relative;
  left: 100%;
  margin-top:80px;
  cursor:pointer;

  transform-origin:     0% 0%;
  -ms-transform-origin:     0% 0%;
  -webkit-transform-origin: 0% 0%;
  -moz-transform-origin:        0% 0%;
  -o-transform-origin:      0% 0%;

  transform:           rotate(-90deg);
  -ms-transform:     rotate(-90deg); 
  -webkit-transform: rotate(-90deg); 
  -moz-transform:    rotate(-90deg); 
  -o-transform:      rotate(-90deg);
}
#siteMap #theMap {
  width:100%;
  height:350px;
  background-color:#666;
  margin-top:-104px;
}

И, наконец, JavaScript:

<script type='text/javascript'>
  $(document).ready(function() {
    $('#mapButton').click(function() {
      var mapPos = parseInt($('#siteMap').css('left'), 10);
      if (mapPos < 0) {
        $('#siteMap').animate({
          left: '+=500'
          }, 458, 'swing', function() {
            // Animation complete.
          });
      }
      else {
        $('#siteMap').animate({
          left: '-=500'
          }, 458, 'swing', function() {
            // Animation complete.
        });
      } 
    });
  });
</script>

Надеюсь, если вы пришли сюда из Google, мой пост будет полезен :)

person Ted A.    schedule 23.01.2013