Click to slide image from center to top?

Forum Moderators: open

Message Too Old, No Replies

Click to slide image from center to top?

floydboy

4:07 am on Aug 31, 2011 (gmt 0)

I can't figure out how to script an image so that it slides to another area on the page when clicked on. For example, a logo that appears in the center of a blank page (vertical-align: middle), but when clicked slides smoothly to the top (vertical-align: top). Alternatively, it could be that clicking the image changes the vertical-align property of the entire table or cell. Either way, I can't figure out how to do this with a smooth animation.

A fantastic example of this--where I got the idea, in fact--is the front page of tumblr.com, where clicking "Log in" smoothly slides the tumblr logo from the top of the page to the center. How is this done?

I'm sorry if the solution is mind-bogglingly simple, I'm kind of a noob. But I've racked the web and I can't seem to find a script that does this. Can somebody please help? Thanks so much.

rocknbil

4:37 pm on Aug 31, 2011 (gmt 0)

There are about a <exag>half million ways</exag> to do this. :-) I'd probably skip the vertical align and use absolute positioning inside a relatively positioned element with jQuery (and also use tables for tabular data, not layout.) Second, I'd assign the click to an anchor, the natural "click object," not the image itself. here's a tested example, create your own 300 X 120 image and use any version of jQuery:


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01  
Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html lang="en"> 
<head> 
 <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> 
 <title>Animate me</title> 
 <style type="text/css"> 
 #container {  
 width: 600px;  
 height: 400px;  
 margin: 100px auto;  
 position: relative;  
 border: 1px solid #000;  
 } 
 #container a {  
 display: block;  
 width: 300px;  
 height: 120px; position:  
 absolute;  
 top: 140px;  
 left: 150px;  
 outline:none;  
 } 
 img { border: none; } 
 </style> 
 <script type="text/javascript" src="jquery-1.4.3.min.js"></script> 
 <script type="text/javascript"> 
 $(function(){ 
 $('#container a').click(function() { return move_box(); }); 
 }); 
 // 
 function move_box() {  
 var curr_top=$('#container a').css('top'); 
 var move_to=(parseInt(curr_top)==0)?140:0; 
 // Change 140 above to match whatever you have in CSS 
 //experiment with 'fast','medium','slow', or millisecond values for the speed 
 $('#container a').animate({top: move_to+'px'}, 1000); 
 return false; 
 } 
 </script> 
</head> 
<body> 
 <p id="container"> 
 <a href="some-meaningful-url-if-JS-is-disabled.html"><img src="some-image.jpg" alt="slide-me"></a> 
 </p> 
</body> 
</html>