使用jQuery的CSS3效果仅适用于chrome调试

Question

I am trying to animate a div object using jQuery and CSS3. But i am obtaining a weird behavior. Effect works on only chrome debug mode. Here is the code

var $s = $('#animateMePlease');
$s.css('transition-duration', 0+'ms');
$s.css({
opacity:0,
display:'block'
});
// debugger; // only works when i stop once code execution here, and release again
$s.css('transition-duration', d.duration+'ms');
$s.css({
opacity:1
});

Thanks for any help.

Answer 1

Since you're already using jQuery why not just use:

$('#animateMePlease').hide().fadeIn(d.duration);

and let jQuery handle the details in a browser-comaptible way - compare the jQuery browser support with the support for CSS3 transitions .

(Make sure that you actually have some number in d.duration )

Update

After reading your comment I see why you don't want to use the standard jQuery way. Also if you are already using those transforms then you already depend on CSS3 support so using transition-duration is not an issue.

In that case you can change this:

$s.css({
  opacity: 1
});

to this:

setTimeout(function () {
  $s.css({
    opacity: 1
  });
}, 10);

so your code becomes:

var $s = $('#animateMePlease');
$s.css('transition-duration', 0 + 'ms');
$s.css({
  opacity: 0,
  display: 'block'
});
$s.css('transition-duration', d.duration + 'ms');
setTimeout(function () {
  $s.css({
    opacity: 1
  });
}, 10);

Adding a small timeout will make sure that the state that the DOM is in so far gets rendered before the opacity gets changed to 1.

See DEMO .