jquery - 带有固定加载div的jquery动画左

Question

我知道这应该很简单，但我不知道出了什么问题。我在左下角使用固定 div 来显示加载/微调器 div。

加载器在显示时应该从左向右滑动（最初设置为 display:none;）。在隐藏它应该从右向左滑动并消失。

JSFIDDLE 在这里

CSS

#loading span {
    float:left;
    margin-top :1px;
    margin-left :3px;
    margin-right :3px;
    line-height:16px;
    font-size:12px;
    font-family:"oswald";
}
#loading img {
    float:left;
    margin-top : 1px;
}
#loading {
    display: none;
    position: fixed;
    z-index: 1000000;
    left:0;
    top:90% !important;
    width:60px;
    height:20px;
    background: black;
    color:white;
    border: 1px solid #ddd;
}

HTML：

<button type="button" id="sh">Show!</button>
<button type="button" id="hd">Hide!</button>

<div id="loading"><span> loading </span>
    <img class="loader" src=" http://i.stack.imgur.com/FhHRx.gif" width="16" height="16" />
</div>

javascript

// Show loading 
$('#sh').on('click', function () {
     $("#loading")
         .animate({
             left: -160
         }, {
             duration: 'slow',
             easing: 'easeOutBounce'
         })
         .animate({
             left: 0
         }, {
             duration: 'slow',
             easing: 'easeOutBounce'
         })
         .show();
 });

Answer 1

$('#sh').on('click', function () {
     $("#loading").toggle('Bounce');
 });

http://jsfiddle.net/wWnrS/

你也可以使用 hide 和 show ，就像这样：

$('#sh').on('click', function () {
     $("#loading").show('Bounce');
 });

Answer 2

看起来您将隐藏代码和显示代码都放在了显示按钮的回调中。代替

// Show loading 
$('#sh').on('click', function () {
     $("#loading")
         .animate({
         left: -160
     }, {
         duration: 'slow',
         easing: 'easeOutBounce'
     })
         .animate({
         left: 0
     }, {
         duration: 'slow',
         easing: 'easeOutBounce'
     }).show();

 });

// Hide loading 
$('#sh').on('click', function () {
  });   

你要

// Show loading 
$('#hd').on('click', function () {
     $("#loading")
         .animate({
         left: -160
     }, {
         duration: 'slow',
         easing: 'easeOutBounce'
     })

 });

// Hide loading 
$('#sh').on('click', function () {
     $("#loading")
         .animate({
         left: 0
     }, {
         duration: 'slow',
         easing: 'easeOutBounce'
     }).show();

  });  

但是，我建议您使用.toggle()函数，direction: right因为它会简化您的代码和界面（您可能只需要一个按钮，而不是两个）。