javascript - 从隐藏元素获取宽度大小

Question

我有一个小问题，请帮我解决这个问题，找到我在这里缺少的东西。
我的 html 代码是:

<div class="drop-down-menu">
  <div class="innerdrop-down-menu">
    <div id="first-tab-cont">
      <ul id="slider">
        <li>...</li>
        <li>...</li>
        <li>...</li>
        <li>...</li>
        <li>...</li>
       </ul>
       <a href="javascript:;" id="back">&lArr;</a>
       <a href="javascript:;" id="forward">&rArr;</a>
     </div>
  </div>
</div>

CSS代码:

.drop-down-menu{ display:none; position:relative; background-color:#FFFFFF; width:100%; height:280px; z-index:2; }
#first-tab-cont{ background-color:#CCC; display:none; width:960px; height:240px; padding:20px; }
#slider{ background-color:#C9F; position:relative; min-width:100%; width:auto; height:240px; font-family: HelveticaNeue; white-space:nowrap; }
#slider li{ background-color:#C03; display:inline-block; margin-right:15px; white-space:nowrap; width:300px; height:240px; }

而当前的 jQuery 代码是:

var Min = 0;
var Max = $("#fifth-tab-cont #slider").width();
var Step = 300;

$("#first-tab-cont #back").click(function(){
    if($("#first-tab-cont #slider").position().left <= Min + Step) {
        $("#first-tab-cont #slider").animate({left: '+=300px'}, Step );
    }
});
$("#first-tab-cont #forward").click(function(){
    if($("#first-tab-cont #slider").position().left >= Max + Step) {
        $("#first-tab-cont #slider").animate({left: '-=300px'}, Step );
    }
});

我的问题是如何获得 slider 宽度大小，以便我只能向左滚动直到他的尺寸？

Answer 1

我已经在 fiddle 中试过了，并分享了一个将 slider 宽度作为隐藏元素的链接。我们可以简单地使用 css 属性来做到这一点

visibility:hidden;

我们可以使用 visibility:hidden; 而不是使用 display:none; 这使得 jquery 认为元素在那里但实际上它是隐藏的并且它会通过我们宽度。

我已发出警报以显示 #slider 宽度，请检查它。

http://jsfiddle.net/fzd10zak/2/