Question

I want to apply highlight and remove effects to the same dom. One after the other. Unfortunately the highlight effect is not visible as the remove gets triggered immediately after.

Any idea to delay the remove action?

$("#<%= dom_id(@stock) %>").effect("highlight", {}, 4000)
$("#<%= dom_id(@stock) %>").remove()

Answer 1

Problem is, .remove() can’t be delayed. It is one of those functions that triggers right away, meaning .delay() does nothing.

However, JavaScript’s setTimeout() function will:

$('#g').click(function(){
$("#hi").hide("highlight", {}, 4000)
setTimeout('$("#<%= dom_id(@stock) %>").remove();', 4100)
});

Here’s an example of this on jsFiddle.