Solved

Animate an object

Posted on 2013-06-15
12
272 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Get Actionable Data from Your Monitoring Solution

Your communication platform is only as good as the relevance of the information you send. Ensure your alerts get to the right people every time with actionable responses. Create escalation rules that ensure everyone follows the process and nothing is left to chance.

 
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

Quiz: What Do These Organizations Have In Common?

Hint: Their teams ended up taking quizzes, too.

Question has a verified solution.

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

How to build a simple, quick and effective accordion menu using just 15 lines of jQuery and 2 css classes
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)

695 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