Forums

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
    Posts
  • #45535

    Hey guys, [Here is the code i have problem with…](http://codepen.io/3cky/pen/harLI “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 :)

    #138715
    Paulie_D
    Member

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

    http://codepen.io/Paulie-D/pen/mzIFj

    #138717

    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.

    #138718

    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.

    #138655
    Paulie_D
    Member

    Absolute positioning doesn’t seem to be an issue : http://codepen.io/Paulie-D/pen/EtKxB

    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.

    #138724

    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. :(

    #138728
    Paulie_D
    Member

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

    #138742

    [Here is a live link](http://3cky.com/animate/index.html “Here is a live link”)

    #138804

    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.