Mouse out / Over scripts effects

Using JavaScript with Hype
1

hi, i have trouble with the animation. when I slowly mouse over to circle 1, 2, 3 and 4. the animation play well(see image). ex: when I mouse over the circle 1 the animation plays, a rectangle raises from the bottom to the top. As I mouse over to circle 2, column one will reverse and disappeared. same as circle 3 and 4 when I mouse over to circle 3. column 2 disappeared. The problem is when I mouse over from either left to right or right to left quickly. the columns will be stuck and they won’t reverse or disappear. I hope my explanation is clear. I had attached my file too. Any help out there will be greatly appreciated.

img1.jpg659×735 24.9 KB

site_01.hype.zip (33.5 KB)

This is the code for this mouseover effects. i dont know how to add this on my project :

//mouseout//
function() {
$(this).removeClass(‘selected’);
}

//mouseout jQuery//
elemData.handle = eventHandle = function(e) {
// Discard the second event of a jQuery.event.trigger() and
// when an event is called after a page has unloaded
return typeof jQuery !== “undefined” && (!e || jQuery.event.triggered !== e.type) ?
jQuery.event.dispatch.apply(eventHandle.elem, arguments) :
undefined;
}

//DOM2//
elemData.handle = eventHandle = function(e) {
// Discard the second event of a jQuery.event.trigger() and
// when an event is called after a page has unloaded
return typeof jQuery !== “undefined” && (!e || jQuery.event.triggered !== e.type) ?
jQuery.event.dispatch.apply(eventHandle.elem, arguments) :
undefined;
}

//mouseover//
function() {
$(this).addClass(‘selected’);
}

//mouseover jQuery//
elemData.handle = eventHandle = function(e) {
// Discard the second event of a jQuery.event.trigger() and
// when an event is called after a page has unloaded
return typeof jQuery !== “undefined” && (!e || jQuery.event.triggered !== e.type) ?
jQuery.event.dispatch.apply(eventHandle.elem, arguments) :
undefined;
}

//DOM2//
elemData.handle = eventHandle = function(e) {
// Discard the second event of a jQuery.event.trigger() and
// when an event is called after a page has unloaded
return typeof jQuery !== “undefined” && (!e || jQuery.event.triggered !== e.type) ?
jQuery.event.dispatch.apply(eventHandle.elem, arguments) :
undefined;
}

2

Your document doesn’t use javascript, and I don’t think you need to for this effect. I believe the issue is that your mouse out is using a continue timeline action. This alone is fine, however the problem comes about if it hasn’t yet hit the pause point on the timeline. You’ll be continuing a running timeline (a non-operation), and then it will later reach that timeline. There’s a few different options you could do:

  • instead of having the in/out, just have the timeline bring the selection up. The have mouse out continue the timeline, but in reverse.
  • Use a go to time in timeline before the continue timeline to jump to the pause point
  • Use relative keyframes with separate timelines for the hiding effect
1 Like
3

thanks, Jonathan, I find the solution already and yeah I don’t need to use the scripts too. I just convert the objects into symbols and everything works fine.

4

I’m glad you were able to get it working!