Jquery change animation effect under 767

How can I make an animation effect change under 767 screen width? I have a div what contains some regional information, but it is not fit under 767. I changed the absolute div to relative with css. It works good, but looks ugly with the fadein effect. I'd like to change it to SlideDown.

Is there any good solution for this?

Thanks all help!

Here is my code:

$(window).resize(function() {
      if ($(window).width() < 767) {
        $('#regio-settings').click(function() {
            $('#regiobox').slideDown(300, "linear");
            return false;
        });
        $('#regiobox-close').click(function() {
            $('#regiobox').slideUp(300, "linear");
            return false;
        });


    } else {
         $('#regio-settings').click(function() {
            $('#regiobox').fadeIn(300, "linear");
            return false;
        });
        $('#regiobox-close').click(function() {
            $('#regiobox').fadeOut(300, "linear");
            return false;
        });
    }



    });