Solved

Animate an object

Posted on 2013-06-15
12
270 Views
Last Modified: 2013-06-18
I have a text area where user can type content. I have an image of a big hammer beside the text area. When a user clicks on the submit button, I want the hammer to move and hit the text area and text area disappear.
I don't want flash. How can I do this?

I am using mvc3. Not sure whether jquery is the ideal tool or html5. some code samples will be appreciated.

Thanks.
0
Comment
Question by:Sirdots
  • 6
  • 3
  • 3
12 Comments
 
LVL 75

Expert Comment

by:käµfm³d 👽
ID: 39250051
Adapting the fiddle found here:


...you can achieve something like this (click the image to start):

<html>
    <head>
    	<script src="jquery-1.10.1.min.js"></script>
    </head>
    <body>
    	<textarea>Hello World!</textarea>
    	<img src="hammer.png"></img>
    	<script>
    		var degree = 0;
    		var timer;

			function rotateCCW($img) {
				$img.css({ WebkitTransform: 'rotate(' + degree + 'deg)'});
				$img.css({ '-moz-transform': 'rotate(' + degree + 'deg)'});

				if (degree > -120) {
					timer = setTimeout(function() {
						--degree; rotateCCW($img);
					},5);
				}
				else {
					$('textarea').val('');
					rotateCW($img);
				}
			}

			function rotateCW($img) {
				$img.css({ WebkitTransform: 'rotate(' + degree + 'deg)'});
				$img.css({ '-moz-transform': 'rotate(' + degree + 'deg)'});

				if (degree < 0) {
					timer = setTimeout(function() {
						++degree; rotateCW($img);
					},5);
				}
			}

    		$(document).ready(function () {
    			$('img').click(function () {
    				rotateCCW($(this));
    			});
    		});
    	</script>
    </body>
</html>

Open in new window


This won't work in every browser, though.
0
 
LVL 44

Expert Comment

by:AndyAinscow
ID: 39250054
Would an animated GIF be suitable ?  (The image contains all the images and shows them in sequence)
0
 
LVL 75

Expert Comment

by:käµfm³d 👽
ID: 39250060
@AndyAinscow

How would you prevent the image from being animated to start with? (What I gather the intent is here.)
0
How Do You Stack Up Against Your Peers?

With today’s modern enterprise so dependent on digital infrastructures, the impact of major incidents has increased dramatically. Grab the report now to gain insight into how your organization ranks against your peers and learn best-in-class strategies to resolve incidents.

 
LVL 44

Expert Comment

by:AndyAinscow
ID: 39250067
That is why I asked if one would be suitable.  (swap a static image with an animated image on button press?)
0
 
LVL 75

Expert Comment

by:käµfm³d 👽
ID: 39250073
Touché  = )
0
 

Author Comment

by:Sirdots
ID: 39250128
Thanks for your comments everyone. Kaufmed - the code you provided does not run. What do I do?
0
 
LVL 75

Expert Comment

by:käµfm³d 👽
ID: 39250155
What browser are you using? I was working in Opera. Chrome should work as well. I cannot speak for IE. Also, you'd need an image file. I was using the attached.

Image
0
 

Author Comment

by:Sirdots
ID: 39250182
Thanks. I changed the head script to this

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>

I used a hammer image and tried chrome,IE and firefox but still no luck. I will continue to troubleshoot.
0
 
LVL 75

Expert Comment

by:käµfm³d 👽
ID: 39250758
Honestly, the animation itself is kind of slow. You might consider using Andy's approach for a better user experience and better browser compatibility.
0
 

Author Comment

by:Sirdots
ID: 39251391
Thanks AndyAinscow. How do I do the animated GIF?
0
 
LVL 75

Assisted Solution

by:käµfm³d 👽
käµfm³d   👽 earned 250 total points
ID: 39252035
You can download GIMP and then review this video:  http://www.youtube.com/watch?v=f-9_HwRcd1A . If you already have Photoshop installed, I believe you can create animaged GIFs with it, but I don't have any experience with that tool, so I cannot advise how you would go about it. Whichever route you choose, be sure to save a copy of your first frame as a single image. That would become the "static" image that Andy referred to. Then the animated GIF would be swapped in via JQuery when you want the animation to occur.
0
 
LVL 44

Accepted Solution

by:
AndyAinscow earned 250 total points
ID: 39252267
To do the animated gif you require some sort of editor to create one.  I've no experience with any so I'll suggest you try the one kaufmed suggests.

Before you go to far that way.  I made a suggestion.  It might be suitable but equally well it might not.  I would suggest you download some animated gif first and test that you can do everything you require on all the browsers you want to target.  Then, and only then, when everything works do you create the gif you want to use.
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

How to build a simple, quick and effective accordion menu using just 15 lines of jQuery and 2 css classes
Exception Handling is in the core of any application that is able to dignify its name. In this article, I'll guide you through the process of writing a DRY (Don't Repeat Yourself) Exception Handling mechanism, using Aspect Oriented Programming.
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

679 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question