Jump to content


Check out our Community Blogs

Register and join over 40,000 other developers!


Recent Status Updates

View All Updates

Photo
- - - - -

Toggle CSS3 animation with JavaScript

javascript css html css3


This topic has been archived. This means that you cannot reply to this topic.
11 replies to this topic

#1 Mello

Mello

    CC Regular

  • Member
  • PipPipPip
  • 29 posts

Posted 26 April 2015 - 03:25 AM

Hi, how do I toggle the animation of the red square with javascript? I started out with a onlick="" but I just dont know what to do after that.

 

Here's the fiddle: https://jsfiddle.net/4swmegpn/

 

I want the button id="3" to toggle the animation of the red square. And button id="4" to stop/reset the animation.

 

/thanks!



#2 keanallen

keanallen

    CC Newcomer

  • Member
  • PipPip
  • 18 posts

Posted 26 April 2015 - 04:10 AM

What do u mean to "toggle the animation of the red sqaure"? PLease clarify. You can use JQuery library for that. Just insert it between your <head> tags. 


Edited by keanallen, 26 April 2015 - 04:22 AM.


#3 Mello

Mello

    CC Regular

  • Member
  • PipPipPip
  • 29 posts

Posted 26 April 2015 - 04:32 AM

What do u mean to "toggle the animation of the red sqaure"? PLease clarify. You can use JQuery library for that. Just insert it between your <head> tags. 

I've updated my code. But I can't get it to work.

 

https://jsfiddle.net/rcz4yp80/2/

 

It works in fiddle, but as soon as I try it from my dreamweaver it just don't work. Any ideas?



#4 keanallen

keanallen

    CC Newcomer

  • Member
  • PipPip
  • 18 posts

Posted 26 April 2015 - 05:01 AM

Use Jquery LIbrary and try this:

 

https://jsfiddle.net/rcz4yp80/4/

 

Hope it helps :)



#5 Mello

Mello

    CC Regular

  • Member
  • PipPipPip
  • 29 posts

Posted 27 April 2015 - 01:35 AM

Thanks keanallen!

#6 charlesdavis

charlesdavis

    CC Regular

  • Member
  • PipPipPip
  • 34 posts

Posted 27 April 2015 - 11:10 PM

You can try this for same http://www.impressiv...javascript/....



#7 Mello

Mello

    CC Regular

  • Member
  • PipPipPip
  • 29 posts

Posted 29 April 2015 - 02:24 AM

I'm going with a follow-up question. I've a problem that when you use the function to rotate the blue square you can only use it once. After that you'll have to reload the page in order to be able to use the rotate function once again.

Also, when you have rotated 120degrees by clicking once, the square then resets itself and goes back to starting position.

 

So I need help with two things.

1. Fix so you can click the rotation function multiple times and it keeps rotating.

2. Prevent the square from reseting it's position.

 

Thanks!



#8 Mello

Mello

    CC Regular

  • Member
  • PipPipPip
  • 29 posts

Posted 29 April 2015 - 02:44 AM   Best Answer

Fiddle here: https://jsfiddle.net/kv7may8t/1/



#9 wim DC

wim DC

    Roar

  • Expert Member
  • PipPipPipPipPipPipPipPip
  • 2681 posts

Posted 29 April 2015 - 03:51 AM

You won't be able to use your css classes as much. The degrees in the css would depend on how often you clicked the button.
Here is a little example:
https://jsfiddle.net/kv7may8t/29/ (Dunno what I did with the link, it shows me 404 first but when I refresh it loads for me)
I changed only Blue + right javascript and added 'transition: 5s; ' to .blue css.

Edited by wim DC, 29 April 2015 - 04:39 AM.


#10 Mello

Mello

    CC Regular

  • Member
  • PipPipPip
  • 29 posts

Posted 29 April 2015 - 04:13 AM

404 here as well. Anyway, I've solved the problem. Thanks anyway :)



#11 wim DC

wim DC

    Roar

  • Expert Member
  • PipPipPipPipPipPipPipPip
  • 2681 posts

Posted 29 April 2015 - 04:39 AM

There was a cheeky little space at the end of my url :D



#12 Mello

Mello

    CC Regular

  • Member
  • PipPipPip
  • 29 posts

Posted 30 April 2015 - 02:53 AM

There was a cheeky little space at the end of my url :D

Darn those cheeky spaces!!!!






Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download