CODEWITHSUNDEEP
jquery
Thomas
Thomas

Reputation: 34188

jquery animate and make div center

when the div is getting fadeout then i want to make it center. please review the code and tell me what to change to make it proper.

here is the implementation url http://jsfiddle.net/Sj4eG/17/ here is the code. 

var grower = $('.grower');
var flag=0;

$('.click').click(function(){
    var windowWidth = $(window).width();
    var windowHeight = $(window).height();

    var left = windowWidth/2 - 150;
    var top = windowHeight/2 - 150;
    var w = 300;
    var h = 300;

    if(flag==0)
    {
        $('.grower').show()
        grower.css({left:windowWidth/2, top:windowHeight/2});
        grower.animate({width:w, height:h, left:left, top:top,opacity : 1},500);
        flag=1;
    }
    else if(flag==1)
    {
        grower.animate({width:h/2, height:w/2, left:(windowWidth/2 -
            $('#grower').width()), top:(windowHeight/2 -
            $('#grower').height())},function() {$('.grower').fadeOut("slow");flag=0;});
        flag=0;
    }
});

Upvotes: 1

Views: 3669

Answers (2)

ogur
ogur

Reputation: 4586

http://jsfiddle.net/Sj4eG/34/

My solution using jQuery UI animations.

HTML

<div class="click">Click here</div>
<div class="grower"></div>

CSS

.click {background:#ccc; border:1px solid black; padding:10px; display:inline-block}
.grower {width:0; height:0; background:red; position:absolute; top:150px; left:150px;opacity: 0}

jQuery

var grower = $('.grower');
var flag = 0;

$('.click').click(function() {
    var windowWidth = $(window).width();
    var windowHeight = $(window).height();

    var left = windowWidth / 2 - 150;
    var top = windowHeight / 2 - 150;
    var w = 300;
    var h = 300;

    if (flag == 0) {

        grower.css({
            left: left, top: top, width: w, height: h, opacity: 0
        });
        grower
            .show('scale', {percent: 100}, 500, function(){ flag = 1; })
            .animate({'opacity':'1'} , { duration: 500, queue: false, easing: 'easeInCubic'});;
    }
    else if (flag == 1) {
        grower
            .hide('scale', {percent: 50}, 500, function(){ flag = 0; })
            .animate({'opacity':'0'} , { duration: 500, queue: false});
    }
});

Upvotes: 2

Krzysztof
Krzysztof

Reputation: 16130

You set left and right wrong. $('#grower').width() is a current width (when you start animation), not target one. You should set left to left:(windowWidth/2 - w/4), because it'll have target width equals to w/2. Then w/2 is left for left and right margins, so (windowWidth/2 - w/4) is the middle. Same story with top.

Working sample: http://jsfiddle.net/lolo/Sj4eG/21/

Upvotes: 2

Related Questions