我对这个jquery show('slow')和hide('slow')有点麻烦。我有一个div,在里面我有一个ajax加载gif,当我正在进行一些处理时出现,这是一个简单的例子:
<input type="button" id="btnShow" value="Show"/>
<input type="button" id="btnHide" value="Hide"/>
<div id="loading"><img src="~/Content/ajax-loader.gif" /></div>
<script type="text/javascript">
$(function () {
$("#loading").hide();
$("#btnShow").click(function() {
$("#loading").show('slow');
});
$("#btnHide").click(function () {
$("#loading").hide('slow');
});
})
</script>
<style type="text/css">
#loading{
text-align: center;
}
</style>
问题是,内容应该以div为中心,但是当我点击“btnShow”时,它会从左边开始,当它完全打开时会进入中间......当我隐藏它时,山姆会发生这种事情。 ..加载gif在中间,当它关闭时,它向左移动......我怎么能防止这种情况发生?
答案 0 :(得分:0)
您需要fadeIn
和fadeOut
个功能,而不是show
和hide
。这应该为你做。只需更换相关代码即可。 =]
$("#btnShow").click(function() {
$("#loading").fadeIn('slow');
});
$("#btnHide").click(function () {
$("#loading").fadeOut('slow');
});
答案 1 :(得分:0)
您应该尝试明确声明丢失div的高度和宽度。
(#)loading{ width:100%; height:50px; }
答案 2 :(得分:0)
如果有人正在寻找这个答案,我找到了解决方案,使用@AlienHoboken所说的fadeIn和fadeOut并调用jquery'animation'。这是完整的代码
<input type="button" id="btnShow" value="Show" />
<input type="button" id="btnHide" value="Hide" />
<div id="loading"><img src="~/Content/ajax-loader.gif" /></div>
<script type="text/javascript">
$(function () {
$("#btnShow").click(function () {
$("#loading").animate({
left: '+=50',
height: 'toggle'
}, 500, function() {
$("#loading").fadeIn(300);
});
});
$("#btnHide").click(function () {
$("#loading").animate({
left: '+=50',
height: 'toggle'
}, 500, function () {
$("#loading").fadeOut(300);
});
});
})
</script>
<style type="text/css">
#loading
{
text-align: center;
}
</style>
答案 3 :(得分:0)
来自JQuery doc:
当提供持续时间,普通对象或“完整”功能时,.show()变为&gt;动画方法。 .show()方法同时为匹配的&gt;元素设置动画宽度,高度和不透明度。
在show()中指定持续时间时,这是默认行为,从一侧滑动到达其位置。
我想你正在寻找一个fadein淡出效果,它在JQuery中有自己的功能:
<script>
$(function () {
$("#loading").hide(); #this one you can keep it, is not animated
$("#btnShow").click(function() {
$("#loading").fadein('slow');
});
$("#btnHide").click(function () {
$("#loading").fadeout('slow');
});
})
</script>
虽然,我宁愿建议使用animate()函数,因为它更完整,你可以更好地控制实际变化:
<script>
$(function () {
$("#loading").hide());
$("#btnShow").click(function() {
$("#loading").animate({
opacity:1, //same as fading in
display:"block" //hide() has set display:"none"
}, 'slow');
});
$("#btnHide").click(function () {
$("#loading").animate({
opacity:0, //same as fading out
display:"none" //same as hide()
}, 'slow');
});
})
</script>
希望这有帮助!