Check when an animation has ended in SVG - javascript

I am starting an animation in SVG and when it ends I want to know so that I can execute another function. I've tried with endEvent="endAnimate()" but nothing happend. It's possible to check when an animation has ended and if so, can I call another function?

According to the documentation, animation elements have an onend event that you can use.
animation event attribute
An animation event attribute is an event attribute that specifies script to run for a particular animation-related event. See Animation event attributes. The animation event attributes are ‘onbegin’, ‘onend’, ‘onload’ and ‘onrepeat’.
So, if you really want to attach it to an animation element you can use it like onend="endAnimate()"

Related

how to add custom events to svg.js

I'm testing svg.js library, and have found problems declaring custom events. Here is the fiddle. Clicking on the first circle should change the color and it works:
circleOne.click(function() {
this.fill({ color: '#f06' })
})
Clicking the second circle should fire the custom event, but it doesn't:
var circleTwo = SVG.select('circle.circle-01');
circleTwo.on('myevent', function() {
alert('ta-da!')
})
function testMe() {
circleTwo.fire('myevent')
}
Changing .fire to .event doesn't help either. Any suggestions? Thanks in advance.
You never use testMe function to fire your event :)
Browser defined events are already fired when an event happens, for the custom event you have correctly defined what happens (alert) when it fires but if you intend it to go off at some point you have to fire it. You also made trigger function but you never used it.
You can fire it on browser defined triggers BUT then simply rather use those events, don't define custom.
Custom events are intended for different use cases. For example, you detected an object is untouched for 10 sec and you wanna notify some other part of the code to react to it. That event is not defined by default, you define it and have custom code checking that fire the event when the condition is met.
Try firing your event on for example click event or simply for testing put this at the end of the scrypt:
testMe();
Now you have fired your custom event when the script loads to that point and executes trigger function.

Javascript fadeIn/fadeOut "stacking"

Trying to get a simple fadeIn/fadeOut work the way I want, basically, my problem is that it won't overwrite, or stop the function, if I've hovered over another element that triggers the action, and it kind puts it in a queue, and will play all the animations, even after my mouse is not even near the elements. I would like it to not let the function trigger again, unless the fadeout has been finished.
$("p").hover(
function()
{
$(document.getElementById('Bottom_Menu')).fadeIn(200);
},
function()
{
$(document.getElementById('Bottom_Menu')).fadeOut(350);
});
To quickly answer your question, you can use stop().
$("#Bottom_Menu").stop().fadeTo(200, 1);
You don't have to use document.getElementById; instead, just use #id. For classes, use .class. It's all built in to jQuery. :)
UPDATE
I'm now using fadeTo instead of fadeIn, because fadeIn only works when display is none. So if we're canceling the previous animation with stop(), we need to use fadeTo, since the display may not be none. (When you use fadeOut, it fades out the element, and when complete, it sets the element's display to none, which hides the element.)
Notes:
The second property of fadeTo is opacity.
fadeTo, like fadeIn, still automatically changes the display property so the element is visible.
$("#Bottom_Menu").clearQueue();
clears all pending animations/operations to do on this element

change html preventDefault

I have a weird recursive situation.
I am changing some HTML inside a element with a small widget and HTML5 contenteditable.
I binded on that element some events such as:
$('.myelement).on('DOMNodeInserted DOMNodeRemoved DOMCharacterDataModified', ..
Those events trigger some AJAX call that on success also modifies the same element.
$('.myelement').html(new_value)
But the thing is, this also triggers those binded events on the element. And then i get a unstoppable ajax recursion.
Is it possible to do something like
$('.myelement').html(new_value).preventDefault()
as in, don't trigger any of the binded events triggers?
No.
Instead, you can unbind the handlers while you update the element, or set a flag while updating and check for that flag in the handler and do nothing.

jquery - perform effect on any event

i have 5 elements in a page.
i have selected them using class names $('.class')
i am trying to perform a function for those selected elements irrespective of event (click or hover or watever).
eg:
$('.class').hover(function(){definition1});
$('.class').click(function(){definition1});
i dont want to have 2 seperate event as above 2, instead i want the function to be executed irrespective of whether its hover or click event.
$('.class').bind('click mouseenter', function() {
// Go nuts.
});
(if using jQuery >= 1.7, swap bind() with on().)
Keep in mind that hover()'s second argument is for mouseleave event, which you haven't written anything for here.
If you want to cover most events, pass in 'blur focus focusin focusout load resize scroll unload click dblclick mousedown mouseup mousemove mouseover mouseout mouseenter mouseleave change select submit keydown keypress keyup error' as the first argument.
You could also try to detect them with code by iterating over properties that start with on, but it sounds too flaky to me.
To bind multiple events to one element in jQuery 1.7 and later you can do the following by separating event names by spaces:
jQuery('.class').on('click hover mousenter mouseleave', function(event){
// do what you need to do
});
which you can see in jsfiddle.
But: be careful, because you can easily fire the event too much times (more than necessary and more than enough). By binding so many events some may be called unnecessarily (as in the example above the code will be fired twice when the mouse cursor will leave the element it hovered over).
If you do not want to exec a function without any event put it in
$(function(){
function test(){definition1}
});
then in html
<body onload="test();">

How to stop toggle event from being fired multiple times on mouseenter/mouseleave?

I'm using jQuery to toggle the visibility of a <div> using the jQuery toggle method. The toggle is fired on the mouseenter and mouseleave event, thus creating the effect of the div to fold out on mouseenter and fold in on mouseleave. Problem is, if the user drags the mouse over the <div> a few times and then leaves the <div>, the div will toggle in and out several times. This can happen if the user accidentally moves around the mouse pointer in the <div> are. Do anyone have any idea on how I can avoid this behavior?
Thanx!
Two things:
If you're going to use both mouseenter and mouseleave I'd suggest using the hover() function; and
When using triggered animations it's a good habit to get into to use the stop() method.
So:
$("div.someclass").hover(function() {
$("...").stop().fadeIn("slow");
}, function() {
$("...").stop().fadeOut("slow");
});
Note: replace "..." with the appropriate selector for what you're toggling and use the appropriate effect (I'm using fade here). Also, this in an event handler refers to the source of the event.
You can use the more common mouseover/mouseout events to get a hover event that doesn't fire on internal mouse movements.
But don't use toggle on a mouse event, it can easily go wrong if eg. the mouse is over the element at page load time, or the mouse leaves the browser (which can allow the mouse to leave the bounds of the element without firing a mouseout). Have separate function for over which shows the content, and out which hides it.
Better: just use the hover() method which is meant for exactly this purpose.
Aside from the correct answer by Cletus, i'd like to point out that using mouseenter and mouseleave events is not wrong. The trick only resides into the stop() method, in fact we could still do:
$("div.someclass").on("mouseenter", function() {
$("...").stop().fadeIn("slow");
});
$("div.someclass").on("mouseleave", function() {
$("...").stop().fadeOut("slow");
});
Here is a jsFiddle example :)

Categories