Issue regarding resizing div with jquery animate function

i wrote a toggle effect like function. when user click button then my div will come out from bottom-right corner to center of the page and the same way when user click again on the button then div will goes back to bottom-right corner from the center of
the page.

the problem is div is appearing the way i want but not resizing the way i want. please see my script and guide me what i am missing.

here is my js fiddle link 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; }
    });

thanks

Hi mou_inn,

For your issue, I have test it in the link which you provide.

When I click the button, the div will come out from the bottom-right to the center,when I click the button again,it will go back to the bottom right.

If you don’t mind, please explain what your issue is.

Best Regards,

Kevin Shen.

Leave a Reply