文本不'；调用jquery'时，不能以中间位置启动；s show（'；slow'；）和hide（'；slow'；）

我很抱歉，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>

$（函数（）{
$（“#加载”）.hide（）；
$（“#btnShow”）。单击（函数（）{
$（“#加载”）.show（'slow'）；
});
$（“#btnHide”）。单击（函数（）{
$（“#加载”）.hide（'slow'）；
});
})
#装载{
文本对齐：居中；
}

---

问题是，内容应该集中在div上，但当我单击“btnShow”时，它从左侧开始，在完全打开时转到中间。。。山姆的事发生在我藏起来的时候。。。正在加载的gif位于中间，当它关闭时，会转到左侧。。。如何防止这种情况发生？

您想要的是

fadeIn

和

fadeOut

功能，而不是

show

和

hide

。这应该对你有用。只需替换相关代码即可。=]

$("#btnShow").click(function() {
    $("#loading").fadeIn('slow');
});
$("#btnHide").click(function () {
    $("#loading").fadeOut('slow');
});

---

您应该尝试明确声明丢失div的高度和宽度。

  (#)loading{
  width:100%;
  height:50px;
  }

（#）装载{
宽度：100%；
高度：50px；
}

如果有人在寻找这个答案，我找到了解决方案，使用@AlienHoboken说的fadeIn和fadeOut，并将jquery称为“动画”。这是完整的代码

<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>

$（函数（）{
$（“#btnShow”）。单击（函数（）{
$（“#加载”）。设置动画({
左：'+=50'，
高度：“切换”
}，500，函数（）{
美元（“#加载”）。法代因（300）；
});
});
$（“#btnHide”）。单击（函数（）{
$（“#加载”）。设置动画({
左：'+=50'，
高度：“切换”
}，500，函数（）{
$（“#加载”）。淡出（300）；
});
});
})
#装载
{
文本对齐：居中；
}

来自：

当提供持续时间、普通对象或“完整”函数时，.show（）将成为>动画方法。.show（）方法同时设置匹配>元素的宽度、高度和不透明度的动画

在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>

$（函数（）{
$（“#加载”）.hide（）#这一个您可以保留它，但它没有设置动画
$（“#btnShow”）。单击（函数（）{
$（“#加载”）.fadein（'slow'）；
});
$（“#btnHide”）。单击（函数（）{
$（“#加载”）.fadeout（'slow'）；
});
})

尽管如此，我还是建议您使用function，因为它更完整，您可以更好地控制实际发生的变化：

 <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>

$（函数（）{
$（“#加载”）.hide（）；
$（“#btnShow”）。单击（函数（）{
$（“#加载”）。设置动画({
不透明度：1，//与淡入相同
显示：“块”//hide（）已设置显示：“无”
}“慢”）；
});
$（“#btnHide”）。单击（函数（）{
$（“#加载”）。设置动画({
不透明度：0，//与淡出相同
显示：“无”//与隐藏（）相同
}“慢”）；
});
})

---

希望这有帮助

是的，成功了！谢谢唯一的问题是它不再像“显示”和“隐藏”那样平滑过渡had@Victor弗兰基·泽克林斯基：你说的“平稳过渡”是什么意思。我相信这是可以解决的如果答案解决了你的问题，请记住接受。好的！只需为此添加一些动画！你的回答很有帮助！谢谢这很有帮助，谢谢