Clash Royale CLAN TAG#URR8PPP

Event handler keeps on calling earlier than animate function

Just to see how event bubbling works I created many div controls, one into another and so on and finally attached click event to all the div which make div to flash whenever it is clicked. I was hoping that one div will flash then another and like this it will bubble up to the parent but all the div's are flashing at the same time.

Why doesn't one event handler complete before calling another one? Does animate function is doing something? Because it doesn't happen normally, I had always noticed that only after completing one event handler another one gets called.

Here is my js:

$("div").on("click", function (e)
$(this).animate( backgroundColor: "red" , 400, "swing", function ()
$(this).animate( backgroundColor: "white" , 400, "swing")
)
)


Here is Html:

<div><div><div><div><div><div><div>

</div></div></div></div></div></div></div>


take a look at the example below I just edited to add the functionality you wanted. You would stop the propagation on the div and then animate, at the end of your final animation callback you would restart the propagation by triggering the event on the parent element. Please vote up if this works for you.
– Harry Chilinguerian
2 days ago

1 Answer
1

From Jquery http://api.jquery.com/animate/

Animation Properties and Values
All animated properties should be animated to a single numeric value, except as noted below; most properties that are non-numeric cannot be animated using basic jQuery functionality (For example, width, height, or left can be animated but background-color cannot be, unless the jQuery.Color plugin is used). Property values are treated as a number of pixels unless otherwise specified. The units em and % can be specified where applicable.

There is a plugin mentioned from that page to allow animating the background color. Also in your code you may or may not want to incorporate:

e.stopPropogation();


That will stop the div event from bubbling up.

You could:

$("div").on("click", function (e)
$(this).css(backgroundColor: "red", opacity: 0)
$(this).animate( opacity: 1 , 400, "swing", function ()
$(this).css(backgroundColor: "white", opacity: 0)
$(this).animate( opacity: 1 , 400, "swing")
)
)


It will have a different effect though, the div will disappear and reappear red, then disappear and reappear white.

If you are just trying to pause the propagation then restart at the end of the annimation you could just retrigger the event on the parent element;

$("div.animate").on("click", function (e)
e.stopPropagation();
$(this).animate( backgroundColor: "red" , 400, "swing", function ()
$(this).animate( backgroundColor: "white" , 400, "swing", function()
$(e.target.parentElement).trigger(e.type);
)
)
)


To make only certain divs animate just add a class to them "animate" for instance and then attach the handler to divs with animate only and any other div will propogate the click automatically with your animation classed divs stopping the propogation, animating and when finished passing up the DOM tree.

I had use jquery UI for this. Animation is happening but all at once rather than on one div at a time. Color Animation
– abhi_awake
2 days ago

Stopping propagation and triggering do solve the problem but why in between the animation other parent event handlers get called because of which we need to do all this??
– abhi_awake
2 days ago

Currently all the parent elements walking up the DOM are going to be triggered. You could put a check in your animation function to check the target of the event to see if it matches specifics.
– Harry Chilinguerian
2 days ago

add a class to all the divs you want animated and then add the click handler to those divs only. The remaining elements that the clicked div is nested within will automatically pass the click event through. Edited the answer to show.
– Harry Chilinguerian
2 days ago

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.