Jquery event not working

I've made this Jquery event and want to apply opacity on my button but it's not working.Please help!

<button type="button" id="btn-opacity" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Sign-Up
</button>

button#btn-opacity {
    background-color: aqua;
    border: hidden;
}

$(document).ready(function() {
    $('#btn-opacity').mouseenter(function(event) {
        /* Act on the event */
        $(this).fadeTo('slow', 0.3);
    });
});