css("右", posVar);不工作答案

【问题标题】：css("Right", posVar); does not workcss("右", posVar);不工作
【发布时间】：2011-06-04 13:06:29
【问题描述】：

这里的主要目标是立即向右“跳跃”。我不想使用.animate()，因为它会产生一点“闪烁”效果——因为它不是即时的。我认为.css() 会立即“跳”到右侧，没有闪烁效果。

我不知道为什么这行不通。我实际上必须使用.animate 来解决这个问题，而不是使用.css()：

$("#gallery ul").animate({right: posVar},0);

这是我的实际代码：

setTimeout(function(){
   var posVar = 2838;        
   $('#gallery ul').css("right", posVar);
}, 300);

这有什么问题？

CSS：

#gallery ul {
  display:block;
  position:relative;
  width:14000px; /*auto calculated from javascript */
}

【问题讨论】：

你使用什么代码和animate 来使它工作？你应用了哪些 CSS 规则？你用的是什么position？
您在 CSS 中使用 #gallerie，但在 JS 中使用 #gallery？
@Matt：抱歉——只是我这边的一个错字，已修复。问题仍然存在。
“这不起作用”，到底发生了什么？您确定 DOM 已构建吗？代码什么时候运行？
请向我们提供完整的代码，甚至可能包含在<script /> 标签中。我刚刚尝试了您提供的两个示例，它们确实有效。也许是你的标记出了什么问题。

标签： javascript jquery css jquery-animate

【解决方案1】：

~~Css 属性：left、right、top、down 将不适用于 display:block 尝试 display:absolute 或 display:fixed~~

当我写下这个答案时，我不知道我在想什么。我的意思是说....你需要position:absolute或position:fixed或position:relative

而且我认为您的代码的问题在于末尾没有“px”...

我已经弄好了，这里是http://jsfiddle.net/Starx/8w6cS/

您的代码在这里有效是一个证明

http://jsfiddle.net/Starx/8w6cS/1/

如果您尝试将 ul 向右移动 2838 像素，这是您的解决方案

http://jsfiddle.net/Starx/8w6cS/2/

【讨论】：

没有display:absolute 或display:fixed。 display 是 block 的事实无关紧要，而且是正确的。也许您的意思是position:absolute 或position:fixed，但即使在这种情况下，position:relative 也可以与left、right、top 和down 一起使用。
display 没有诸如“绝对”或“固定”之类的值，这就是您所说的 position。并且left、right、top、bottom 将在position != 'static' 无论display 设置什么属性时工作。
@Starx：你的第三把小提琴杀死了数百万。坏蛋
只是一个问题，如果你可以使用正数left，添加负数right有什么意义？
@Tom：Starx 使用了否定的权利。在我的原始脚本（我实际工作）中，我使用了积极的权利。

【解决方案2】：

您的意思是position: absolute 或position: fixed。不过它可以与显示块一起使用。

我尝试了以下代码，它可以工作：

setTimeout(function(){
    var posVar = 100;        
    $('#gallery ul').css({ right: posVar + 'px' });
},300);

【讨论】：

@Mike，也许您应该为值定义一个单位，对吗？ IE。 posVar = '2838 像素';
这肯定会有所帮助。不过，请在 px 之前删除空格，就像您在答案中所做的那样。

【解决方案3】：

它应该工作。这是一个带有示例代码的 jsFiddle，运行良好：http://jsfiddle.net/mathias/PjQBe/

请提供更多代码。

【讨论】：

P.S. setTimeout()blah-blah 部分，可以很容易地快捷方式到$('#gallery ul').delay(300).css('right', posVar);，看起来更干净。
@Nick：哦，真的！我的错在那里，没有注意到 300 毫秒的延迟，因此认为它也可以这样工作。感谢您指出。

【解决方案4】：

按如下方式更改 CSS：

#gallery ul {
    display:block;
    position:relative;
    right:0px; /*THIS WILL DO THE TRICK FOR JQUERY */
    width:14000px; /*auto calculated from javascript */
}

现在您的 jQuery 代码可以运行了！

【讨论】：