相关疑难解决方法(0)

在我的页面中,我有一堆(大约30个)dom节点应该被添加为不可见,并在它们完全加载时淡入.
元素需要显示:内联块样式.

我想使用jquery .fadeIn()函数.这要求元素最初有一个display:none; 规则最初隐藏它.在fadeIn()之后,元素当然具有默认显示:inherit;

如何使用除继承之外的显示值的淡入淡出功能？

我有一些HTML和CSS看起来像这样:

<div id="TheContainer">
<div class="MyDivs"></div>
<div class="MyDivs" id="ThisDiv"></div>
</div>

#TheContainer{text-align:center;}
.MyDivs{margin:0px auto;display:inline-block;}
#ThisDiv{display:none;}

我正在使用inline-block和保证金:0px自动,以便在MyDivs其中居中TheContainer.问题是当我这样做时:

$('#TheContainer').children().hide();
$('#ThisDiv').show();

然后ThisDiv不再居中,因为显示从无变化到块而不是内嵌块,就像我在CSS定义中那样.

我知道我可以写.css('display','none'),.css('display','inline-block')但我想知道是否有办法通过保持这项工作.show()

谢谢你的建议.

我正在一个我在工作中继承的网站上工作,该网站使用进度条/标签显示捐赠进度.大多数名单将有9年(例如1990-1999),但最后一个有13年(2000-2012).因此,我有一个javascript函数showHiddenBars()显示/隐藏各个元素.

在第一次加载时,一切都正确显示(默认显示2000-2012)但是在隐藏它们然后显示它们之后,它会弄乱布局.据我所知,谷歌Chrome的检查员是在使用该.show()功能时,它会添加style="display: inline-block"到我的span元素中,该元素包含标签.我正在使用clipjQuery UI 的缓动效果与show和hide函数.

如何防止.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 …