jQuery .show（）は要素にstyle = "display：inline-block"を追加します

Question

私は進行状況バー/ラベルを使って寄付の進捗状況を示す職場で継承したサイトで作業しています。リストの大半は9年（例えば1990-1999）ですが、最後のリストは13（2000年~2012年）です。このため、javascript関数showHiddenBars()はそれぞれの要素を表示/非表示にしています。

最初の読み込み時に、すべてが正しく表示されます（デフォルトでは2000〜2012が表示されます）。ただし、表示していない状態で表示すると、レイアウトが失われます。 Google Chromeのインスペクタを介してわかることは、.show()関数を使用すると、ラベルを格納しているspan要素にstyle="display: inline-block"を追加していることです。私は、表示機能と非表示機能を持つjQuery UIのイージング効果をclipに使用しています。

.showがstyle = "display：inline-block;"を追加しないようにするにはどうすればよいですか？

全Javascriptを：http://pastebin.com/ZmbQqwWF

全HTML：http://pastebin.com/mf6W1ahF

例サイト：http://kirsches.us/3000Strong/decadeProgress.html

のjavascript：

function showHiddenBars() { 
    "use strict"; 
    //show the bars we aren't using. 
    $('#decade10').show("clip"); 
    $('#decade11').show("clip"); 
    $('#decade12').show("clip"); 
    $('#decade13').show("clip"); 
    $('#decade10label').show("clip"); 
    $('#decade11label').show("clip"); 
    $('#decade12label').show("clip"); 
    $('#decade13label').show("clip"); 
    $('#decade10AmountGiven').show("clip"); 
    $('#decade11AmountGiven').show("clip"); 
    $('#decade12AmountGiven').show("clip"); 
    $('#decade13AmountGiven').show("clip"); 
} 
function hideHiddenBars() { 
    "use strict"; 
    //hide the bars we aren't using. 
    $('#decade10').hide("clip"); 
    $('#decade11').hide("clip"); 
    $('#decade12').hide("clip"); 
    $('#decade13').hide("clip"); 
    $('#decade10label').hide("clip"); 
    $('#decade11label').hide("clip"); 
    $('#decade12label').hide("clip"); 
    $('#decade13label').hide("clip"); 
    $('#decade10AmountGiven').hide("clip"); 
    $('#decade11AmountGiven').hide("clip"); 
    $('#decade12AmountGiven').hide("clip"); 
    $('#decade13AmountGiven').hide("clip"); 
} 

HTML：

<div id="decadeProgressContainer"> 
    <span class="titleFontNoBorder" id="decade1label">2000</span> 
    <div id="decade1" class="progressBarSpacingTop"></div> 
    <span id="decade1AmountGiven">$130,000</span><br /> 

    <span class="titleFontNoBorder" id="decade2label">2001</span> 
    <div id="decade2" class="progressBarSpacing"></div> 
    <span id="decade2AmountGiven">$130,000</span><br /> 

    <span class="titleFontNoBorder" id="decade3label">2002</span> 
    <div id="decade3" class="progressBarSpacing"></div> 
    <span id="decade3AmountGiven">$130,000</span><br /> 

    <span class="titleFontNoBorder" id="decade4label">2003</span> 
    <div id="decade4" class="progressBarSpacing"></div> 
    <span id="decade4AmountGiven">$130,000</span><br /> 

    <span class="titleFontNoBorder" id="decade5label">2004</span> 
    <div id="decade5" class="progressBarSpacing"></div> 
    <span id="decade5AmountGiven">$130,000</span><br /> 

    <span class="titleFontNoBorder" id="decade6label">2005</span> 
    <div id="decade6" class="progressBarSpacing"></div> 
    <span id="decade6AmountGiven">$130,000</span><br /> 

    <span class="titleFontNoBorder" id="decade7label">2006</span> 
    <div id="decade7" class="progressBarSpacing"></div> 
    <span id="decade7AmountGiven">$130,000</span><br /> 

    <span class="titleFontNoBorder" id="decade8label">2007</span> 
    <div id="decade8" class="progressBarSpacing"></div> 
    <span id="decade8AmountGiven">$130,000</span><br /> 

    <span class="titleFontNoBorder" id="decade9label">2008</span> 
    <div id="decade9" class="progressBarSpacing"></div> 
    <span id="decade9AmountGiven">$130,000</span><br /> 

    <span class="titleFontNoBorder" id="decade10label">2009</span> 
    <div id="decade10" class="progressBarSpacing"></div> 
    <span id="decade10AmountGiven">$130,000</span><br /> 

    <span class="titleFontNoBorder" id="decade11label">2010</span> 
    <div id="decade11" class="progressBarSpacing"></div> 
    <span id="decade11AmountGiven">$130,000</span><br /> 

    <span class="titleFontNoBorder" id="decade12label">2011</span> 
    <div id="decade12" class="progressBarSpacing"></div> 
    <span id="decade12AmountGiven">$130,000</span><br /> 

    <span class="titleFontNoBorder" id="decade13label">2012</span> 
    <div id="decade13" class="progressBarSpacing"></div> 
    <span id="decade13AmountGiven">$130,000</span> 
</div> 
<!--end div #decadeProgressContainer--> 

Answer 1

を変更する必要はありません、非表示にする）（.hideを使用することができます

$('#el').css('display','block'); 

の.cssを使用それはhide（）とshow（）に依存しないでください：

element.css('display', 'none'); equivalent of hide() 
element.css('display', 'inline-block'); equivalent of show() 
element.css('display', 'block'); What you want 

Answer 2

私は要素のdefautスタイルがインラインであれば、インラインブロックを追加します。少なくとも選択ドロップダウンにはインラインブロックが追加されます。あなたがブロックを追加する必要がある場合、あなたはまだそれは、視認性のためにあなたが望むようにスタイルを設定明示的に