从隐藏元素获取宽度大小

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

我在小提琴中尝试过，并分享了一个链接，将滑块宽度作为隐藏元素。我们只需使用css属性即可完成此操作

visibility:hidden;

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

我已经给了一个警告，以显示#slider宽度，请检查它。

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

Answer 2

可以使其显示(display: block)，但使其透明(opacity: 0)。或者显示它，获取尺寸，然后隐藏它。

var Min = 0,
    $dropDownMenu = $('.drop-down-menu').show(),
    $slider = $("#slider");
    Max = $slider.width(),
    Step = 300;

$dropDownMenu.hide();

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

Answer 3

如果你可以将整个块放在屏幕之外，你就可以得到元素的大小，对于你不能访问的隐藏元素。

您可以使用position:absolute，并远离视窗