CODEWITHSUNDEEP
javascriptjquery
CinnamonBun
CinnamonBun

Reputation: 1150

Delay appending to element

I'm new to JavaScript, and i'm just wondering if it's possible to delay appending elements to another element. I have a map, which i've appended points in the form of anchor tags. Once the page loads all of the markers are displayed. I thought it would be a nice feature to add each pointer with a short delay. Here is how I currently append,

element = $("<a href='#' class='deskBtn tooltip fancybox' title='" + this.allData[i].Name + "' data-name='" + this.allData[i].UserName + "' data-department='" + this.allData[i].DepartmentName + "'></a>");

$(element).css({
    "top": this.allData[i].DeskYCoord,
        "left": this.allData[i].DeskXCoord
}).appendTo(".map");

I tried exposing the setInterval method after the append, however, I was unable to do so. Any help would be greatly appreciated.

Upvotes: 0

Views: 178

Answers (2)

Goran.it
Goran.it

Reputation: 6299

Use the delay() functionality of the jQuery:

element = $("<a href='#' class='deskBtn tooltip fancybox' title='" + this.allData[i].Name + "' data-name='" + this.allData[i].UserName + "' data-department='" + this.allData[i].DepartmentName + "'></a>");

  $(element).css({
                "top": this.allData[i].DeskYCoord,
                "left": this.allData[i].DeskXCoord
            })
.delay ( 800, "my-queue" ).queue("my-queue", function (next) {
$(this).appendTo(".map");
next();

});

Upvotes: 0

A. Wolff
A. Wolff

Reputation: 74420

You should use a timeout, not interval or use delay:

$(element).css({
    "top": this.allData[i].DeskYCoord,
        "left": this.allData[i].DeskXCoord
}).delay(2000).queue(function(next){
  $(this).appendTo(".map");
  next();
});

Upvotes: 1

Related Questions