javascript - fadeIn() 不触发，但其他一切都是

Question

我有一个在我使用 socket.io 时触发的小片段:

socket.on('wheelspin', function (random) {
    var img = document.querySelector('img');
    $("img").fadeIn();
    console.log('wheelspin!!!');
    console.log('fadeIn');

        img.removeAttribute('style');
        var deg  = 0; 

        console.log('deg = ' + deg);
        console.log('Number = ' + random);
        if(random == 0) {var deg = 15; var css = '-webkit-transform: rotate(' + deg + 'deg);'; }
        img.setAttribute('style', css);
}

每当我运行它时，网页控制台都会显示 console.logs 但它不会执行淡入。如果我在套接字触发器之外执行以下操作:

$( document ).ready(function() {
    $("img").fadeIn();
 });

有什么建议吗？

谢谢

Answer 1

可能 $("img").fadeIn(); 无法正常工作，因为 img 尚不可用，并且 socketio 的 'wheelspin' 事件在此之前发出。当 DOM 就绪时，$("img").fadeIn(); 在 $(document).ready() 中工作得很好，这一点很明显。

建议: 当 DOM 准备好时使用一切

$( document ).ready(function() {
    socket.on('wheelspin', function (random) {
          var img = document.querySelector('img');
          $("img").fadeIn();
          console.log('wheelspin!!!');
          console.log('fadeIn');

          img.removeAttribute('style');
          var deg  = 0; 

          console.log('deg = ' + deg);
          console.log('Number = ' + random);
          if(random == 0) {var deg = 15; var css = '-webkit-transform: rotate(' + deg + 'deg);'; }
          img.setAttribute('style', css);
     }
 });