Question

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.

Answer 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