Jquery Accordion - expand and collapse div on hover

Question

I created a basic accordion implementation, but not close to what I want.

Link http://jsfiddle.net/mwqhp/

JQuery Code:

$(function () { $('.box').hover(function () { $(this).stop(true,true).animate({ width: '+=300', height: '+=300' }, 500); }, function () { $(this).stop(true,true).animate({ width: '-=300', height: '-=300' },500) }); }); 

Here is a link to what I would like to reproduce. This is the sprint homepage. http://www.sprint.com/mysprint/pages/sl/global/index.jsp

Any help would be appreciated.

Thanks!

Answer 1

UPDATED: jsFiddle

 (function($) { $('.box').hover(function() { $this = $(this), $oC = $this.find('.oldContent'), $nC = $this.find('.newContent'); $oC.stop(true, true).fadeOut('fast'); $this.stop(true, true).animate({ width: '+=300', height: '+=300', bottom: '+=300' }, function() { $nC.fadeIn('fast'); }); }, function() { $nC.stop(true, true).fadeOut('fast'); $this.stop(true, true).animate({ width: '-=300', height: '-=300', bottom: '-=300' }, function() { $oC.fadeIn('fast'); }); }); })(jQuery); 

It works better, but sometimes displays older content. Work on the fix.

Answer 2

Not sure what you want:

http://jsfiddle.net/mwqhp/1/

 <div> <div class=" div4"></div> <div class=" div5"></div> <div class=" div6"></div> <div id="container"> <div class="box div1"></div> <div class="box div2"></div> <div class="box div3"></div> </div> </div> 

and CSS

 #container { margin-top: 20px; float: left; margin-left: -300px; } .box { width: 100px; height: 100px; display: inline-block; } .div1 { background: yellow; float: left; } .div2 { background: red; float: left; } .div3 { background: pink; float: left; } body>div { width: 800px; } .div4 { height:20px; width: 100px; background: yellow; float: left; } .div5 { width: 100px; height:20px; background: red; float: left; } .div6 { height:20px; width: 100px; background: pink; float: left; }