jQuery - 显示滑动面板时动画绝对定位的 div 的“左”位置

Posted 2023-05-08

【中文标题】jQuery - 显示滑动面板时动画绝对定位的 div 的“左”位置

【英文标题】：jQuery - animating 'left' position of absolutely positioned div when sliding panel is revealed

【发布时间】：2011-02-09 13:23:05

【问题描述】：

我在屏幕左侧有一个隐藏面板，单击位于屏幕左侧的“选项卡”会滑入视图。我需要面板滑过现有页面内容的顶部，并且我需要标签随之移动。所以两者都绝对定位在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;

非常感谢

【参考方案1】：

我从头开始，实际上阅读了 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?

    );

);

【参考方案2】：

我在尝试完成相同任务时偶然发现了这篇文章。

不幸的是，Matt 的回答将不再适用于最新版本的 jQuery。在编写 Matt 的答案时，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 来到这里，我的帖子会对您有所帮助:)