Question

在我的页面中，我需要使用动态创建的自定义div显示一些消息，该div位于绝对位置。

我的实际需要是在点击创建时显示div。如果用户没有按remove按钮，该div应该在5秒后隐藏和删除该元素。如果用户在该5秒之前按下remove按钮，则div应该淡出并删除该点击上的内容。

我开发了如下代码

HTML代码

<body id="ap-bd">
    <input type="button" id="dyn-cr" value="Create" />
    <input type="button" id="dyn-rm" value="Remove" />
</body>

Javascript代码

$(document).ready(function(){
//................FIRST PART...........
$(document).on("click", "#dyn-cr", function(){
    html = "<div class='div-1'></div>";
    $("#ap-bd").append(html);
    $(".div-1").fadeIn("slow");
    $(".div-1").delay(5000).fadeOut(2000, function(){
        $(".div-1").remove();
    });
});

//................SECOND PART...........
$(document).on("click", "#dyn-rm", function(){
    $(".div-1").fadeOut("slow", function(){
        $(".div-1").remove();
    });
});
});

此代码用于显示消息5秒，淡出并删除内容。我需要执行另一件事，当我点击删除按钮时，它应该淡出。但那部分没有用。它执行删除按钮的单击事件。但是第二部分的fadeOut()部分不起作用。

同时，如果我在第二部分中使用此代码，则下面的代码正常工作（这是我现在使用的替代方法，但我不想更喜欢这个）

$(document).on("click", "#dyn-rm", function(){
    $(".div-1").remove();
    });
});

第一个代码出了什么问题？

工作 JSFIDDLE Code

请帮忙

Answer 1

<强> Demo

在你的代码中，一旦你创建了一个div然后你删除了相同的功能。所以不要删除而不是你必须使用隐藏方法

     $(document).ready(function () {

    var timeInterVal = 0;
    $(document).on("click", "#dyn-cr", function () {
        html = "<div class='div-1'></div>";
        $("#ap-bd").append(html);
        $(".div-1").fadeIn("slow");
        timeInterVal = setInterval(test, 5000);
    });

    $(document).on("click", "#dyn-rm", function () {

        clearInterval(timeInterVal);
        $(".div-1").remove();

    });

    function test() {
        $(".div-1").fadeOut(2000, function () {
            $(".div-1").remove();
            clearInterval(timeInterVal);
        });
    }
});

Answer 2

1.当你点击创建按钮时，你实现fadout.so的功能，它会隐藏。

2.）如果你想在删除时隐藏，你必须在创建按钮上显示。

3.不要同时使用删除和淡出。

只尝试这个。

 $(document).on("click", "#dyn-rm", function(){

        $(".div-1").fadeOut("slow", function(){

        });
    });

http://jsfiddle.net/8WL57/2/

Answer 3

您可以使用setInterval实现此目的。

var interVal = 0;
    $(document).on("click", "#dyn-cr", function(){
        html = "<div class='div-1'></div>";
        $("#ap-bd").append(html);
        $(".div-1").fadeIn("slow");
         interVal = setInterval(hide, 5000);

    });

小提琴：http://jsfiddle.net/8WL57/12/

使用fadeIn（）和fadeOut（）在javascript中隐藏动态创建的div

3 个答案: