Search the Community
Showing results for tags 'hover state conflict timeline'.
Found 1 result
-
$(".iSmall, .shrink").on("click", function() { if (circle.reversed()) { circle.play(); } else { circle.reverse(); } }); Regarding above ^ Where and how do you add in a line to kill the hover to start the click? The hover conflicts with the timeline... It seems this would be a very common issue since a majority of clickable links have hover effects, but I have found less material on this on the web than the career of Milli Vanilli. Maybe not that many links are actually the element that is animated. Also, I think it must be done differently with tweens and timelines because even the few examples I have found (to unbind the hover state on click) didn't work at all. So if you go to my codepen, there's a main vertical Nav with a link near the top with the text "Shrink." and there is a squashed looking mobile nav in the top left corner with the middle link reading, "SMALL - LG" They are both linked to the same timeline you will find in the js window. On the main Nav, the hover state conflicts because it happens to be the element that is going to be animated. On the little mobile Nav, there is no conflict because the link isn't in a timeline. Please Note that the animation is not working correctly on the Pen and things looked squished in general, but that shouldn't matter in answering - as I'm looking for a general answer on how this is done. I welcome any answers or input as I am new to jQuery, Greensock, and writing forums. . . also computers and electricity and reading/writing. LOL seems that way, Thanks in advance anybody who answers.