0

我对这个 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 在中间，当它关闭时它会向左移动......我怎样才能防止这种情况发生？

4

4 回答 4

0

您需要fadeInandfadeOut功能，而不是showand hide。这应该为你做。只需替换相关代码即可。=]

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

http://jsfiddle.net/cpWaa/

于 2013-07-31T00:52:17.030 回答
0

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





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

于 2013-07-31T00:54:37.087 回答
0

如果有人正在寻找这个答案，我找到了解决方案，使用@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>
于 2013-07-31T01:15:36.230 回答
0

来自JQuery 文档：

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

当您在 show() 中指定持续时间时，这是默认行为，从一侧滑动直到到达其位置。

我想你正在寻找一个淡入淡出效果，它在 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>

希望这可以帮助！

于 2013-07-31T01:19:22.173 回答