Jquery Selector in Horizontal Accordion

Question

I'm Trying to build a simple horizontal accordion that will eventually contain more complex data (iframes)... The problem is that I want the size of each accordion tab to be specific to the data it contains, so I'm trying to edit what's already out there (Some tabs are larger than others). When a user hovers over any tab I want to expand that tab to 50% (regardless of its previous size). All that is working fine, but the problem is I can't figure out how to go back to the tabs ORIGINAL width after mouseout. Right now I have the panels shrinking to 10% to illustrate the problem. If you cycle through the page then reload you will see what i mean. Any ideas?

http://www.brianvargo.com/test.html

Answer 1

在与您类似的情况下对我有用的方法是，创建一个具有所述元素加载时的原始大小的属性，然后将其检索以供以后使用。

Answer 2

You can save the original width somewhere. This is one way (with your code):

$(document).ready(function(){  
    $("ul li").mouseover(function(){
        if (this.originalWidth == undefined) this.originalWidth = $(this).width();
        $(this).stop().animate({width:'50%'},{queue:false, duration:500,}) 
    });  

    $("ul li").mouseout(function(){  
        $(this).stop().animate({width: this.originalWidth},{queue:false, duration:600})  
    });  
}); 

Untested, and you might choose a different way to save it, but the general idea is there.