Databases
StackOverflow2013
Postsdbo
POjQuery animate(), expand a div
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POjQuery animate(), expand a div
    text
    copied!<p>HTML:</p> <pre><code>&lt;div id="box0"&gt;&lt;img src="http://s14.postimg.org/9x1nrefy5/A_Sunday_on_La_Grande_Jatte.png" id="pic0"&gt;&lt;/div&gt; &lt;div id="box1"&gt;&lt;img src="http://s14.postimg.org/hbqzjs1tp/starry_night.png" id="pic1"&gt;&lt;/div&gt; &lt;div id="box2"&gt;&lt;img src=http://s14.postimg.org/x7ftn2se5/mona_lisa.png" id="pic2"&gt;&lt;/div&gt; &lt;div id="box3"&gt;&lt;img src="http://s14.postimg.org/k4k73t265/the_scream.png" id="pic3"&gt;&lt;/div&gt; </code></pre> <p>CSS:</p> <pre><code> * { padding: 0px; margin: 0px; z-index: 0; } img { position: relative; } div { position: absolute; overflow: hidden; border: 8px solid #61260D; } #box0 { /* A Sunday on La Grande Jatte */ height: 150px; width: 120px; top: 300px; left: 100px; } #pic0 { left: -15px; top: -15px; height: 337px; width: 500px; } #box1 { /* Starry Night */ height: 100px; width: 400px; top: 150px; left: 100px; } #pic1 { left: -35px; top: -20px; height: 300px; width: 480px; } #box2 { /* Mona Lisa */ height: 150px; width: 100px; top: 190px; left: 50px; } #pic2 { left: -20px; top: -20px; height: 300px; width: 198px; } #box3 { /* The Scream */ height: 200px; width: 160px; top: 60px; left: 200px; } #pic3 { left: -30px; top: -20px; height: 400px; width: 314px; } </code></pre> <p>Javascript:</p> <pre><code> var h = []; var w = []; var left = []; var top = []; var speed = 300; for (var i = 0; i &lt; 4; i ++) { h[i] = $('#box'+i).css('height'); w[i] = $('#box'+i).css('width'); left[i] = $('#pic'+i).css('left'); top[i] = $('#pic'+i).css('top'); } for (var i = 0; i &lt; 4; i ++) { $('div').hover( function() { $(this).stop().css({'zIndex':'5'}).animate({ height : $(this).children().css('height'), width : $(this).children().css('width') }, speed); $(this).children().animate({ left : '0', top : '0' }, speed); }, function() { $(this).stop().css({'zIndex':'0'}).animate({ height : h[i], width : w[i] }, speed); $(this).children().animate({ left : left[i], top : top[i] }, speed); } ); } </code></pre> <p>What I want to do is when the cursor enter a div, the div will expand to the image size and the image embedded will change its location using animate().<br> It does expand well, however, the div does not restore its original size when the cursor leaves.<br><br> <a href="http://jsfiddle.net/hanglout/dVz6H/7/" rel="nofollow">Here is the demo</a></p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload