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，但它不会执行fadeIn。如果我在套接字触发器外执行以下操作，则可以正常工作：

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

有什么建议吗？

由于

Answer 1

可能$("img").fadeIn();无法正常工作，因为img尚未推出，并且socketio＆＃39; wheelspin＆＃39;在此之前，事件正在发生。从$("img").fadeIn();在DOM准备就绪后$(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);
     }
 });

fadeIn（）不会触发，但其他一切都是

1 个答案: