CODEWITHSUNDEEP
jquerycssanimationjquery-animateduration
Fyxerz
Fyxerz

Reputation: 169

Animate a jQuery function

I am having trouble animating a jQuery function so that it doesn't expand instantly but takes a certain amount of time to do so.

My code is as follows:

$(function() {
$('.box').click(function(){
    var wWidth = $(window).width();
    var wHeight = $(window).height();
    $(this).width(wWidth);
    $(this).height(wHeight);
    $(this).siblings().addClass('fade')
});
});

I have tried using animate() and ,slow at the end of my function but I can't get it to work. I also believe I can't use CSS transitions because I am not using classes. Any help would be much appreciated. Thanks in advance.

Upvotes: 0

Views: 38

Answers (2)

ahjashish
ahjashish

Reputation: 573

you can use .animate({width:'desired_px'}, desired_time); and .animate({height:'desired_px'}, desired_time); to trigger when you click. try to give your desired_time in milliseconds if predefined words like slow don't work.

 $(document).ready(function(){
        $(".box").hover(function(){                   
            $(this).animate({width:'desired_px'}, desired_time);
            $(this).animate({height:'desired_px'}, desired_time);
        });
 });

Upvotes: 1

Amin Jafari
Amin Jafari

Reputation: 7207

here you go:

$('.box').click(function(){
    var wWidth = $(window).width();
    var wHeight = $(window).height();
    $(this).animate({width:wWidth+'px',height:wHeight+'px'},1000);
    $(this).siblings().addClass('fade')
});

this will take 1000 ms or 1s to expand the .box element.

Upvotes: 2

Related Questions