Question

I cant even come up with a proper subject for this one… Basically I have a box div, that when click expands to a rectangle and shows content in the new expanded area.

The problem I’m having is that when I animate out the div’s width, the browser wants to render the content as the box is stretching, rather than just have it placed where I need it.

Initial State

 ____  
|    |  
|____|  

Clicked

 _________________  
|      Content    |  
|_________________|  

How it currently renders

 __________  
|      Con |  
|______tent|  

How I want it to render:

 __________  
|      Cont|ent (overflow:hidden)  
|__________|  

Someone help me out here… total brainfart.

Answer 1

Easy with jQuery

$(div).click( 
   function(){ 
       $(this).animate({clip: 'rect(50px, 50px, 50px, 50px)'}); 
   }, 

Example: http://www.protofunc.com/scripts/jquery/clipFx/