2015-06-16 1 views
0

Я написал что-то, что позволяет мне динамически создавать div, но у меня есть несколько проблем, которые заставляют его исчезать с помощью JQuery. В настоящее время div появляется, но не исчезает.jQuery fadeOut на динамически творческом div

<script src="/socket.io/socket.io.js"></script> 
<script src="https://cdn.socket.io/socket.io-1.2.0.js"></script> 
<script src="http://code.jquery.com/jquery-1.11.1.js"></script> 
    <script> 
    socket.on('hello', function (answer) { 
     console.log('hello?: ' + answer); 
     var div = document.createElement("div"); 
     div.setAttribute("id", "#fade"); 
     div.style.margin = Math.floor((Math.random() * 400) + 1) + "px"; 
     div.style.width = "100px"; 
     div.style.height = "100px"; 
     div.style.background = "red"; 
     div.style.color = "white"; 
     div.innerHTML = "Hello"; 
     document.body.appendChild(div); 
     $("#fade").delay(3000).fadeOut("slow"); //Fadeout 
    }); 
    </script> 

    <body> 
    </body> 
+0

Попробуйте обернув это в $ (документ) .ready (функция() {}); возможно? – neilsimp1

+0

@ neilsimp1 Просто сделал это, все еще ничего. http://puu.sh/ir3NO/aba6e537c8.png Не отображается div, но нет fade –

ответ

1

Функции Vanilla DOM не используют знак # для идентификаторов. Изменение

div.setAttribute("id", "#fade"); 

К

div.setAttribute("id", "fade"); 
+0

Оказывается, я ошибся, все еще не работает –

3

У вас есть ID неправильно, вы устанавливаете его #fade, а не только fade, вы не добавите хэш при настройке, но почему бы не использовать JQuery

socket.on('hello', function (answer) { 

    $('<div />', { 
     id : 'fade', 
     css : { 
      margin  : Math.floor((Math.random() * 400) + 1), 
      width  : 100, 
      height  : 100, 
      background : 'red', 
      color  : 'white' 
     }, 
     html : 'Hello' 
    }).delay(3000).fadeOut('slow').appendTo('body'); 
}); 

FIDDLE

Смежные вопросы