Search code examples
javascriptjquerycsssmoothing

Smoothly change css

my situation is as follows:

I have the following function

var showHideMemberContent = function(){
if(isHidden === false){
    $("#showHideMemberContent").text("Member Content");
    $("#main").css("height","-=187");
    $('#mainBottom').hide('slow', function() {
        isHidden = true;
    });
} else {
    $("#showHideMemberContent").text("Verberg");
    $("#main").css("height","+=187");
    $('#mainBottom').show('slow', function() {
        isHidden = false;
    });
}
};

So when the function executes it hides the "mainBottom" div. The "main" div should decrease/increase its height. It does so, but I need to know if there is a way to do this smoothly.

Thanks in regard.

Solution

  • Yes, use jquerys animate() method, http://api.jquery.com/animate/.

    Include jquery ui if you want to use easing types other than "linear" or "swing". Its passed as a second argument (string), to the animate method. https://jqueryui.com/easing/

    Example (with jquery ui loaded):

    $(selector).animate({ height: '200px' }, 'easeInOutCubic', function(){ 
    /* animation comlete */ 
});

    Also, work on your accept rate.