有關使用jquery動畫功能調整div大小的問題

Question

我寫了一個類似於函數的切換效果。當用戶單擊按鈕時，我的div會從右下角出現到頁面中心，當用戶再次單擊按鈕時，div將從頁面中心返回到右下角。

問題是div出現了我想要的方式，但沒有調整我想要的方式。請看我的腳本，並指導我缺少什麼。這裏是我JS提琴鏈接http://jsfiddle.net/tridip/6o1wv3yt/

$(document).ready(function() { 
     var flag = false; 

     $("#Button1").click(function() { 
      if ($("#UPSContainer").exists() == false) { 
       $('form').append('<div id="UPSContainer" class="hidden" style="background:red;display:none;position:absolute;height=0px;width=0px;"></div>'); 
      } 

      if ($("#UPSContainer").hasClass("hidden")) { 

       $("#UPSContainer").css({ display: 'block' }); 

       var xleft = ($(window).width() - $("#UPSContainer").width()); 
       var xtop = ($(window).height() - $("#UPSContainer").height()); 

       $("#UPSContainer").css({ left: xleft, top: xtop, opacity: 0 }); 

       $("#UPSContainer").stop(true).animate({ 
        'left': (($(window).width() - $("#UPSContainer").width())/2) + 'px', 
        'top': (($(window).height() - $("#UPSContainer").height())/2) + 'px', 
        'height': 350 + 'px', 
        'width': 500 + 'px', 
        'marginLeft': '-250px', 
        'marginTop': '-175px', 
        'opacity': '1' 
       }, { duration: 1000, queue: false, easing: 'easeOutQuart', 

        step: function (now, tween) { 
         if (tween.prop === 'width') { 
          if (now >= 50) { 
           //console.log('Width reached 50%'); 
           if (!flag) { 
            flag = true; 
            $("body").append('Width reached 50%' + now); 
           } 
          } 
         } 
        }, 
        complete: function() { 
         $("#UPSContainer").removeClass("hidden").addClass("Shown"); 
        } 
       }); 
      } 
      else if ($("#UPSContainer").hasClass("Shown")) { 

       var xleft = $(window).width(); 
       var xtop = $(window).height(); 

       $("#UPSContainer").stop(true).animate({ 
        'left': $(window).width() + 'px', 
        'top': $(window).height() + 'px', 
        'height': 0 + 'px', 
        'width': 0 + 'px', 
        'opacity': '0' 
       }, { duration: 1000, queue: false, easing: 'easeOutQuart', 

        step: function (now, tween) { 
         if (tween.prop === 'width') { 
          if (now >= 50) { 
           //console.log('Width reached 50%'); 
           if (!flag) { 
            flag = true; 
            $("body").append('Width reached 50%' + now); 
           } 
          } 
         } 
        }, 
        complete: function() { 
         $("#UPSContainer").removeClass("Shown").addClass("hidden"); 
        } 
       }); 

      } 

      return false; 
     }); 


     jQuery.fn.exists = function() { return this.length > 0; } 
    }); 

Answer 1

編輯，更新（V4）

嘗試

HTML

<button>click</button> 
<br> 
<div class="square"></div> 

CSS

.square { 
    width:0px; 
    height:0px; 
    background:red; 
    position:absolute; 
    opacity:0; 
    left:calc(100% + 20px); 
    top:calc(100% + 20px); 
} 

JS

$.fn._fadeToggle = _fadeToggle; 

function _fadeToggle(d, callback) { 
    var elem = $(this); 
    var body = $("body"); 
    var settings = elem.is(":hidden") ? "+" : "-"; 
    return elem.stop(true, true).animate({ 
     left: (parseInt(elem.css("left")) > window.innerWidth ? "-" : "+") 
       + "=" + (window.innerWidth + 325)/2 + "px", 
     top: (parseInt(elem.css("top")) > window.innerHeight ? "-" : "+") 
      + "=" + (window.innerHeight + 325)/2 + "px", 
     width: settings + "=300" + "px", 
     height: settings + "=300" + "px", 
     opacity: elem.is(":hidden") ? "1" : "0" 
    }, { 
     duration: d, 
     easing: "easeOutQuart", 
     step: function (fx, tween) { 
      body.css("overflow", "hidden") 
     }, 
     done: function (promise) { 
      body.css("overflow", "inherit") 
     }, 
     complete: !!callback ? callback : $.noop() 
    }) 
}; 

$("button").on("click", function() { 
    var el = $(".square"); 
    el.is(":animated") ? el.queue("fx", function() { 
     el._fadeToggle(1000, function() { 
      console.log("complete") 
     })}) : 
    el._fadeToggle(1000, function() { 
      console.log("complete") 
     }) 
}) 

的jsfiddle http://jsfiddle.net/guest271314/L7jLmsgn/1/