Question

我已经写了一些允许我动态创建div的东西，但我有一些问题让它使用Jquery淡出。 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>

Answer 1

您的ID错误，您将其设置为#fade，而不只是fade，您在设置时不添加哈希值，但为什么不使用jQuery < / p>

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

Answer 2

Vanilla DOM函数不使用＃符号作为ID。变化

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

要

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

jQuery fadeOut on动态创意div

2 个答案: