The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Adding animation class via jQuery doesn’t work

  • This topic is empty.
Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
  • #45535

    Hey guys, [Here is the code i have problem with…]( “Here is the code I am having trouble with”). I want to add the class “stretch” to the div with class “styled” , when the anchor tag on the left is clicked so that the animation:stretch 2s; runs once. However when the link is clicked the animation seems to stop in the middle of the run and then the anchor tag and the div disappear. I am quite new to jQuery, so please tell me what am I doing wrong. Thank you :)


    Try this….I’ve stripped some stuff out but the basic functionality is there.


    But you removed the absolute positioning which is crucial to the thing I’m trying to build as that div would have to be over all of the elements on the page, set with the highest z-index. Thanks Paulie_D, now I know that the problem might not be the jQuery code I’ve written but rather the absolute positioning.


    The weird part is that the animation works just fine when I put the ” animation:stretch 2s; ” rule into the .styled class and the animation works fine as well with the -webkit- vendor prefix in Chrome , but it breaks in Firefox.


    Absolute positioning doesn’t seem to be an issue :

    The Codepen in FF does seems to be a mess though. I don’t know if this a a CP issue.

    Is it broken on a ‘live’ site.


    Yep , I made locally html , css and .js files , made sure that jquery and the css file are loaded properly but the animation doesn’t work in Chrome 27 , FF 21 or IE10. :(


    We’d really need to see it on a live page. My Codepen works in Chrome but not in FF.


    [Here is a live link]( “Here is a live link”)


    Turned out that I was loading my functions before I had loaded jQuery. Now everything works fine. Paulie_D thank you for the help. I really appreciate it :)

Viewing 9 posts - 1 through 9 (of 9 total)
  • The forum ‘CSS’ is closed to new topics and replies.