jquery slideup problem

[jwxie518]

Hi guys. This is a query js problem. I am creating my new homepage.
John Wong - Life of Engineering | Photography | Music | Research | Stupido

Here is the sample code I found

jquery script

		<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.1.js"></script>
		<script type="text/javascript">
			$(document).ready(function(){
				//To switch directions up/down and left/right just place a "-" in front of the top/left attribute
				//Vertical Sliding
				$('.boxgrid.slidedown').hover(function(){
					$(".cover", this).stop().animate({top:'-260px'},{queue:false,duration:300});
				}, function() {
					$(".cover", this).stop().animate({top:'0px'},{queue:false,duration:300});
				});
				//Horizontal Sliding
				$('.boxgrid.slideright').hover(function(){
					$(".cover", this).stop().animate({left:'325px'},{queue:false,duration:300});
				}, function() {
					$(".cover", this).stop().animate({left:'0px'},{queue:false,duration:300});
				});
				//Diagnal Sliding
				$('.boxgrid.thecombo').hover(function(){
					$(".cover", this).stop().animate({top:'260px', left:'325px'},{queue:false,duration:300});
				}, function() {
					$(".cover", this).stop().animate({top:'0px', left:'0px'},{queue:false,duration:300});
				});
				//Partial Sliding (Only show some of background)
				$('.boxgrid.peek').hover(function(){
					$(".cover", this).stop().animate({top:'90px'},{queue:false,duration:160});
				}, function() {
					$(".cover", this).stop().animate({top:'0px'},{queue:false,duration:160});
				});
				//Full Caption Sliding (Hidden to Visible)
				$('.boxgrid.captionfull').hover(function(){
					$(".cover", this).stop().animate({top:'160px'},{queue:false,duration:160});
				}, function() {
					$(".cover", this).stop().animate({top:'260px'},{queue:false,duration:160});
				});
				//Caption Sliding (Partially Hidden to Visible)
				$('.boxgrid.caption').hover(function(){
					$(".cover", this).stop().animate({top:'160px'},{queue:false,duration:160});
				}, function() {
					$(".cover", this).stop().animate({top:'220px'},{queue:false,duration:160});
				});
			});
		</script>

html-make up

			<div class="boxgrid captionfull">
				<img src="jareck.jpg"/>
				<div class="cover boxcaption">
					<h3>Jarek Kubicki</h3>
					<p>Artist<br/><a href="http://www.nonsensesociety.com/2009/03/art-by-jarek-kubicki/" target="_BLANK">More Work</a></p>
				</div>		
			</div>
			
			<div class="boxgrid caption">
				<img src="kamil.jpg"/>
				<div class="cover boxcaption">
					<h3>Kamil Smala</h3>
					<p>Artist<br/><a href="http://www.nonsensesociety.com/2009/03/the-art-of-kamil-smala/" target="_BLANK">More Work</a></p>
				</div>
			</div>
				
			<div class="boxgrid slideright">
				<img class="cover" src="martin.jpg"/>
				<h3>Martin Stranka</h3>
				<p>Photographer<br/><a href="http://www.nonsensesociety.com/2009/03/photography-by-martin-stranka/" target="_BLANK">More Work</a></p>
			</div>
			<div class="boxgrid thecombo">
				<img class="cover" src="florian.jpg"/>
				<h3>Florian Nicolle</h3>
				<p>Graphic Designer<br/><a href="http://www.nonsensesociety.com/2009/03/portrait-week-florian-nicolle/" target="_BLANK">More Work</a></p>
			</div>
			
			<div class="boxgrid slidedown">
				<img class="cover" src="nonsense.jpg"/>
					<h3>The Nonsense Society</h3>
					<p>Art, Music, Word<br/><a href="http://www.nonsensesociety.com" target="_BLANK">Website</a></p>	
			</div>
			<div class="boxgrid peek">
				<a href="http://feeds2.feedburner.com/buildinternet" target="_BLANK"><img src="birss.jpg"/></a>
				<a href="http://www.buildinternet.com" target="_BLANK"><img class="cover" src="buildinternet.jpg"/></a>
			</div>

and finally its css

			.boxgrid{ 
				width: 325px; 
				height: 260px; 
				margin:10px; 
				float:left; 
				background:#161613; 
				border: solid 2px #8399AF; 
				overflow: hidden; 
				position: relative; 
			}
				.boxgrid img{ 
					position: absolute; 
					top: 0; 
					left: 0; 
					border: 0; 
				}
				.boxgrid p{ 
					padding: 0 10px; 
					color:#afafaf; 
					font-weight:bold; 
					font:10pt "Lucida Grande", Arial, sans-serif; 
				}
				
			.boxcaption{ 
				float: left; 
				position: absolute; 
				background: #000; 
				height: 100px; 
				width: 100%; 
				opacity: .8; 
				/* For IE 5-7 */
				filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
				/* For IE 8 */
				-MS-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
 			}
 				.captionfull .boxcaption {
 					top: 260;
 					left: 0;
 				}
 				.caption .boxcaption {
 					top: 220;
 					left: 0;
 				}

Here is my custom code. I made changes but what I need help with is the last jquery code // reverse vertical slideup
I looked up the original code -> //Partial Sliding (Only show some of background), and made some add-on to it.

				// reverse partial vertical silding
				$('.boxgrid.slideup').hover(function(){
					$(".cover", this).stop().animate({top:'-45px'},{queue:false,duration:160});
				}, function() {
					$(".cover", this).animate({top:'0px'},{queue:false,duration:10});
				$(".reverse", this).animate({top:'45px'},{queue:false,duration:10});
				}, function() {
					$(".reverse", this).stop().animate({top:'0x'},{queue:false,duration:160});
				});
			});

In my template, for this specific reverse slideup code, I did this

			<div class="boxgrid slideup">
				<a href="http://feeds2.feedburner.com/buildinternet" target="_BLANK"><img class="reverse" src="images/piano_001.jpg"/></a>
				<a href="http://www.buildinternet.com" target="_BLANK"><img class="cover" src="images/music_art_1010_001.jpg"/></a>
			</div>

Here my homepage, there is a list of jquery effects below the hamster picture. The 2nd one (the violin one) is what I had for this custom jquery.
You see, the purpose was to create one slide-up, while the second one slide-down.

Now, when i hover the image, it will slide up but stop then i have to hover again (meaning starting the effect again), and the piano will slide-down more.

The image doesn't return to its original state (like the other), it will stuck there.

Any idea how to fix this problem?

[jwxie518]

problem solved


updated :

				// reverse partial vertical silding
				$('.boxgrid.slideup').hover(function(){
				$(".cover", this).stop().animate({top:'-45px'},{queue:false,duration:160});
				$(".reverse", this).animate({top:'45px'},{queue:false,duration:160});
				}, function() {
					$(".cover", this).stop().animate({top:'0px'},{queue:false,duration:160});
				});