How to get this effect done ?

[vishalkhialani]

Hi,
I am not good in flash hence I am looking for a alternative soution to get the below effect done.

I really like this effect I want to use it on a site I am making. I was wondering if I can make it in ajax ?

To see the simple yet nice effect please visit below link. In case you are wondering its a mouse over effect where the entire box just moves upwards.

http://www.youtube.com/watch?v=Yh3P1ReCd1c

Cheers,
Vishal Khialani

[silviubogan]

You must use Javascript. When onmouseover event occurs on the big div, you change the width of the invisible (actually it is not invisible. it has a width of 0 so you think it is invisible) div from 0 to the final width slowly (using setTimeout ).

When the onmouseout event occures on the big div you set the width of the new div from the final width to 0 slowly (using setTimeout ).

[stevenpetersen]

what would the code look like.

[silviubogan]

what would the code look like.

Something like this. I didn't tested it but I hope it works!
Good luck!

CSS:

#hintdiv {
  width: 0px;
  background: red;
}

HTML:

<div id="bigdiv">
  our new shop
  <div id="hintdiv">
    cheap products
  </div>
</div>

JS:

var hintdiv = document.getElementById("hintdiv");
var bigdiv = document.getElementById("bigdiv");
var hintheight = 50; // change here
var step = 5; // and here

var tmp1 = 0;
function showHint() {
  hintdiv.style.height = tmp1 + "px";
  if(tmp1 < hintheight) {
    tmp1 += step;
    setTimeout(showHint, 100);
  }
}

var tmp2 = maxheight;
function hideHint() {
  hintdiv.style.height = tmp2 + "px";
  if(tmp1 > hintheight) {
    tmp1 -= step;
    setTimeout(showHint, 100);
  }
}

bigdiv.onmouseover = showHint;
bigdiv.onmouseout = hideHint;

[vishalkhialani]

Hi,
Appreciate the advice.

Cheers,
Vishal

[vishalkhialani]

Hi,
I maanged to get it done using jquery animate. Its based on the same logic you had given. Please see the output here
http://www.youtube.com/watch?v=XICGzogHO3o

now the red box needs to be behind this div so that once the div moves we can see the red box.

I am not sure how to put a div behind another div. Please help.

Cheers,
Vishal

[vishalkhialani]

Hi,
I figured it out I used the z-index and it worked perfectly and now things are nearly perfect.

I did find one issue if I do a mouse over from the left of the div there is no problem but if I do a mouseover from the top of the box it kind of goes over the loop twice or sometimes into a infinite loop.

U can have a look at the video here: http://www.youtube.com/watch?v=W6WLwRaM6aE

My code is :

<div id="outterBox1">
	
		 
	
	<div id="box1">
	this is a a dummy text to see if it works
	  
</div>
		<div id="innerBox1">
		<img src="images/box.png" width="288" height="45" border="0" alt="ViewMore">		
<script type="text/javascript">
    $("#outterBox1").mouseover(function(){
      $("#box1").animate({ 
			top:"48px"        
                      }, 2000 );
                     
    });
    
    
    
    $("#outterBox1").mouseout(function(){
      $("#box1").animate({ 
			top:"148px"        
                      }, 2000);
    });

</script>
	 		
		
		</div>
	
	</div>

Cheers,
Vishal
Cheers,
Vishal

[silviubogan]

The red div should have an initial height of 0px. When you move your mouse over the big div you should animate the red div's height from 0px width to the final height (e.g. 40px) and when you move your mouse outside the big div you should animate the red div from the final height to 0px height. Maybe you can do this with jQuery. I don't use it so I don't know if it is possible.