How to change the border-radius of a div on hover using jquery?

$('#categories').hover(
    function() {
        $(this).find('#menul开发者_JS百科ist').show();
    },
    function() {
        $(this).find('#menulist').hide();
    }
)

What else should i add inside the hover function to change the border-radius property?

try this:

$('#categories').hover(
    function() {
        $('#menulist').show();
        $('#menulist').css('border-radius', '25px');
    },
    function() {
        $('#menulist').hide();
    }
)

animateCorners = function(event) {

    r = (event.type == 'mouseenter' ? 40 : 0);
    $(this).css({
        'border-top-left-radius': r,
        'border-top-right-radius': r,
        'border-bottom-right-radius': r,
        'border-bottom-left-radius': r
    });

}
$('div').hover(animateCorners, animateCorners);

jsFiddle example

For example:

$('#categories').hover(
    function() {
        $(this).find('#menulist').show()
        .css("border-radius", 5)
        .css("-webkit-border-radius", 5)
        .css("-moz-border-radius", 5);
    },
    function() {
        $(this).find('#menulist').hide();
    }
)

What?

If there should be border radius on an element that is first hidden.. then why should the border radius be applied on hover?

Just do:

#menulist{   
    border-radius:20px;
    -webkit-border-radius:20px;
    -o-border-radius:20px;
    -moz-border-radius:20px;
}

http://jsfiddle.net/bG5yt/ ( also on a side note hovers like this do make sense to do with jquery if you want some animations, but since you dont... )

if you really wanted to do it on hover you could also do

#menulist:hover {
    border-radius:20px;
    -webkit-border-radius:20px;
    -o-border-radius:20px;
    -moz-border-radius:20px;
}

or

#categories:hover #menulist {
    border-radius:20px;
    -webkit-border-radius:20px;
    -o-border-radius:20px;
    -moz-border-radius:20px;
}

you should add border-radius using class

.rad
{   border-radius:25px;
    -webkit-border-radius:25px;
    -o-border-radius:25px;
    -moz-border-radius:25px;
}


$('#categories').hover(
    function() {
        $(this).find('#menulist').show().addClass('rad');
    },
    function() {
        $(this).find('#menulist').hide();
    }
)

This a global jQuery function to set cross border radius:

jQuery.fn.setBorderRadius = function(top, right, bottom, left) {

        //set up defaults if only one or two variables are passed in
        right = right || top;
        bottom = bottom || top;
        left = left || right;

        var borderRadiusObj = {
            '-moz-border-radius': top + " " + right + " " + bottom + " " + left,
            '-webkit-border-radius': top + " " + right + " " + bottom + " " + left,
            'border-radius': top + " " + right + " " + bottom + " " + left
        }
        return (this).css(borderRadiusObj); // to maintain chainability by returning 'this'
    };

Here is an example:

HTML

<div id="radius"></div>

jQuery

$("#radius").setBorderRadius('5px');

It is chainable. So you can use it as follows:

$('#menulist').show().setBorderRadius('5px');

Hope it helps!

$(document).ready(function () {
            $("#start").mouseover(function () {
                $(this).css("border-radius", "25px")
                $(this).css("transition-duration", "1s")
                $(this).css("color", "black")
                $(this).css("background-color", "skyblue")
                //$(this).css("font-family", "Arial")
                });
            $("#start").mouseout(function () {
                $(this).css("border-radius", "10px")
                $(this).css("background-color", "#454952")
                $(this).css("color", "white")
                //$(this).css("font-family", "Bantag")
            });
        });