animate debug

animate debug

HTML

<body>
		<div class="banner-site" style="background-image:url('https://media.senscritique.com/media/000009498078/1200/Lady_Vengeance.jpg')">
		  <h1><a class="tdn cgrey" href="#" title="Retour à l'accueil de">Play it's evil?</a></h1>
		  <div class="false-hover"></div>
			<!-- Button on/off à replace-->
    <div class="onoffswitch">
        <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" checked autocomplete="off">
        <label class="onoffswitch-label" for="myonoffswitch">
            <span class="onoffswitch-inner"></span>
            <span class="onoffswitch-switch"></span>
        </label>
    </div>
		<div class="container_slide_actu">
			<video id="mavideo" controls autoplay muted loop="true">
				<source src="" type="video/mp4">
			</video>
		</div>
	</div>
	</body>

CSS

body{
	margin:0;
}
.banner-site{
    width:100%;
    background-color:white !important;
    background-position:center !important;
    background-repeat:no-repeat !important;
    background-size:cover !important;
    background-attachment:fixed;
    height:350px;
    display:flex;
    align-items:center;
    margin-top:-15px;
    transition:all .7s;
    position:relative;
    border-bottom:1px solid white;
    border-top:1px solid white;
		overflow:hidden;
  }
  .banner-site:hover h1{
    color:white;
    border:2px solid white;
    text-shadow:1px 1px 5px rgba(0,0,0,.9);
  }
  .banner-site:hover h1 a{
    color:white;
  }
  .banner-site a{
	color:black;
	text-decoration:none;
    transition:all .7s;
  }
  .banner-site .false-hover{
    position:absolute;
    width:100%;
    height:100%;
    top:0;
    left:0;
    background-color:rgba(0,0,0,0);
    z-index:1;
    transition:all .7s;
  }
  .banner-site h1{
    text-align:center;
    border:2px solid #161416;
    color:#161416;
    margin:auto;
    padding:10px;
    border-radius:2px;
    font-family:'Cinzel';
    font-size:30px;
    font-weight:300;
    text-transform:uppercase;
    position:relative;
    z-index:2;
    text-shadow:1px 1px 5px rgba(255,255,255,.9);
    transition:all .3s;
  }
  .banner-site .false-hover:hover{
    background-color:rgba(0,0,0,.5);
  }
	/*On/Off switch | ty https://proto.io/freebies/onoff/ */
.onoffswitch {
		position: absolute; width: 90px;
		-webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
		opacity:.5;/*à voir si on keep*/
		right:10px; bottom:15px;
		z-index:9999;
		display:block;
}
.onoffswitch-checkbox {
		display: none;
}
.onoffswitch-label {
		display: block; overflow: hidden; cursor: pointer;
		border: 2px solid #999999; border-radius: 20px; text-transform:uppercase;
}
.onoffswitch-inner {
		display: block; width: 200%; margin-left: -100%;
		transition: margin 0.3s ease-in 0s;
}
.onoffswitch-inner:before, .onoffswitch-inner:after {
		display: block;...

JavaScript

$(document).ready(function(){
function switchButton(){
  console.log("coucou")
  $('.onoffswitch').click(function(){
    if($('.onoffswitch').hasClass('nothere')){
    	$('.container_slide_actu').animate({
        left : 0}, 700);
        $('.onoffswitch').removeClass('nothere');
    }else{
      $('.container_slide_actu').animate({
        left : '-100%'}, 700);
      $('.onoffswitch').addClass('nothere');
    }
  });
}
switchButton();
});