Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
?
Solved

Animate an object

Posted on 2013-06-15
12
Medium Priority
?
277 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 45

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
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
LVL 45

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 750 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 45

Accepted Solution

by:
AndyAinscow earned 750 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

Industry Leaders: 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

Introduction JSON is an acronym for JavaScript Object Notation.  It is a text-string data transport mechanism, capable of representing simple or complex data structures in a consistent and easy-to-read manner.  Similar in concept to XML, but more e…
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. 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.: (CODE)
Suggested Courses

578 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