Overwriting CSS : Display none property with jquery

问题

For an element defined as display:none in css I am trying to run a function which tries to display the element using .show(), code below:

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);

All the variables are getting populated I have checked by alerting all of them and given them default values as well, but somehow the element is not being shown after the timeout.

回答1:

There seems to be two problems in the code you have written. you have not closed the .each() loop .. Also setTimeout is a global function.. .. Check this

    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);​

Check this FIDDLE

回答2:

setTimeout is a global function.

var c = $('.element');

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

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

Demo: http://jsfiddle.net/S7nw3/

回答3:

If you need to delay when the elements are being shown, you can also make use of the jQuery .delay() function.

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

c.delay(1000).show();

来源：https://stackoverflow.com/questions/12373272/overwriting-css-display-none-property-with-jquery