Question

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.

Answer 1

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.