覆盖 CSS：使用 jquery 显示无属性答案

【问题标题】：Overwriting CSS : Display none property with jquery覆盖 CSS：使用 jquery 显示无属性
【发布时间】：2012-09-11 15:34:51
【问题描述】：

对于在 css 中定义为 display:none 的元素，我正在尝试运行一个函数，该函数尝试使用 .show() 显示该元素，代码如下：

CSS

.element {
  position: absolute;
  display: none;
  left: 0;
  top: 0;
}

HTML

<div class="element">Some content here</div>
<div class="element">Some content here</div>

jQuery

var c = $('.element');

c.each(function () {
  c.css({
    'left': dleft + 'px'
  });

  c.css({
    'top': dtop + 'px'
  });

  c.setTimeout(function () {
    c.show(1000);
  }, sduration);

所有变量都被填充我已经通过警告所有变量来检查它们并给它们默认值，但不知何故在超时后元素没有显示。

【问题讨论】：

你不能这样使用 setTimeout。

标签： javascript jquery html css settimeout

【解决方案1】：

您编写的代码似乎存在两个问题。你还没有关闭 .each() 循环.. setTimeout 也是一个全局函数.. .. 检查这个

    var dleft = 40;
var dtop = 40;
var sduration = 1000;
var c = $('.element');

c.each(function() {
    c.css({
        'left': dleft + 'px',
        'top': dtop + 'px'
    });
});
setTimeout(function() {
    c.show(1000);
}, sduration);

查看FIDDLE

【讨论】：

【解决方案2】：

setTimeout 是一个全局函数。

var c = $('.element');

c.each(function () {
  c.css({ 'left': dleft + 'px', 'top': dtop + 'px' });

  setTimeout(function () {
    c.show(1000);
  }, sduration);
});

演示：http://jsfiddle.net/S7nw3/

【讨论】：

【解决方案3】：

如果你需要延迟元素的显示，你也可以使用jQuery的.delay()函数。

c.each(function() {
    c.css({
        'left': dleft + 'px',
        'top': dtop + 'px'
    });
});

c.delay(1000).show();

【讨论】：

如果你试图动画元素的显示，你将它传递给 .show() 方法本身，所以你可以使用 .show('slow')
谢谢，但我通过使用 .animate 和使用完整参数的回调得到了这一点......