Bouton avec animation en mouseover jquery

Bonjour ! j'ai un petit soucis avec mon bouton en position fixed, j'aimerai que quand je passe dessus avec la souris, il se décale de 50px vers la droite, hors, l'animation se met en place que quand le curseur de ma souris est hors de la fenêtre de mon navigateur !

HTML:

<div id="rdv">
	<div id="button_contact_fixed">
		<button>Contactez-moi !</button>
	</div>
</div>

CSS:

/*bouton "prendre rdv"*/
#button_rdv_fixed
{
    position: fixed;
    top: 53%;
    left: 0;
    border: none;
    outline: none;
    background-color: rgb(17, 31, 40);
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    padding: 20px;
    transition: all 0.5s ease;
    cursor: pointer;
    color: white;
    text-transform: uppercase;
}


#button_rdv_fixed:hover
{
    background-color: #e9516d;
}

.svg-inline--fa.fa-w-8 
{
    width: 2.5em;
}

JS:
$(window).scroll(function() {
    if ($(this).scrollTop() >= 50) {        // If page is scrolled more than 50px
        $('#button_rdv_fixed').fadeIn("3000");    // Fade in the button
    } else {
        $('#button_rdv_fixed').fadeOut("3000");   // Else fade out the button
    }
});

$(document).ready(function(){
    $(this).mouseover(function(){
        $("#button_rdv_fixed").css({left: '50px'});
    });

	    $(this).mouseout(function(){
	        $("#button_rdv_fixed").css({left: '-10px'});
	    });
});

Salut,

tu pourrais faire ainsi en passant uniquement par du CSS

<div id="rdv">
	<div id="button_contact_fixed">
		<button id="button_rdv_fixed">Contactez-moi !</button>
	</div>
</div>

#button_rdv_fixed
{
   position: fixed;
    top: 53%;
    left: 0;
    border: none;
    outline: none;
    background-color: rgb(17, 31, 40);
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    padding: 20px;
    transition: all 0.5s ease;
    cursor: pointer;
    color: white;
    text-transform: uppercase;
}


#button_rdv_fixed:hover
{
    background-color: #e9516d;
    animation: move_button 1s;
    animation-fill-mode: forwards;
}

.svg-inline--fa.fa-w-8 
{
    width: 2.5em;
}

@keyframes move_button {
  0% {
    transform: translate(0, 0);
  }
  
  100% {
    transform: translate(50px, 0);
  }
 }

Modifié par biduletruck (07 Mar 2018 - 12:31)