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/

有关使用jquery animate函数调整div的问题

1 个答案: