Smoothly change css

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

You can use CSS to achieve this. Simply add this rule to your CSS declaration for #main:

#main {
    -khtml-transition: height 0.3s ease;
    -moz-transition: height 0.3s ease;
    -ms-transition: height 0.3s ease;
    -o-transition: height 0.3s ease;
    -webkit-transition: height 0.3s ease;
    transition: height 0.3s ease;
}

Here the height part defines the property to apply the transition to, the 0.3s defines the time it takes to transition from one state to another, and the ease property defines the function for the transition. Ease will slowly accelerate to 50% transition and then decelerate to 100%.

The advantage of using CSS over jQuery's animate function is that the CSS transform is hardware accelerated when supported, and will be smoother and more efficient. The disadvantage is that some antiquated browser versions will not support the effect, however it will simply fall back to a non-animated height change, rather than breaking.

To learn more about CSS transitions, follow the link below to Mozilla's article. They're a great reference for these sort of things and an excellent place to start learning, or even brush up on your knowledge. I've also included an example of this technique below.

MDN article on transitions.

Here is a jsfiddle example.

Answer 2

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.