.animate() в jQuery, и если условие, похоже, не работает

Question

Я не эксперт в jQuery, и я пытаюсь создать своего рода кнопочный переключатель: Когда я нажимаю на кнопку «Главная/Новости ", контент тоже должен переключаться.

Но это, похоже, не работает ... Несмотря на условие if, условие AND else выполняется ... Я не понимаю. Кто-то может сказать мне, где мне не удалось?

Вот jsfiddle: https://jsfiddle.net/zgLsbw2h/1/

JQuery:

$(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(); });

Спасибо заранее.

** Редактировать

Более объяснение (в надежде упростить):

У меня есть два контейнера HTML. Когда я нажимаю на кнопку, я хочу переключить их. По умолчанию я получил контейнер1; когда я нажимаю odd => container2; когда я нажимаю даже => container1 ...

Некоторые скриншоты объяснить:

-The баннер моего сайта (по умолчанию => container1 (1 на скриншоте)) и слайд-шоу (который приходит на баннер => container2 (2 на скриншоте)): http://prntscr.com/dpwxat

Answer 1

Причина, по которой ваша анимация идет и выходит из-за того, что onclick работает дважды. Причина этого в том, что вы нацелились на класс «onoffswitch», который у вас более одного. Если вы нацелитесь на «#myonoffswitch» вместо этого, это идентификатор, он только нацелен на одну вещь и будет срабатывать только один раз. Я тоже немного очистил JS. Проверьте это, дайте мне знать, что вы думаете.

$(document).ready(function(){ 
 
    $('#myonoffswitch').on("click", function(){ 
 
    if($("#myonoffswitch").is(':checked') == false) { 
 
     $('.container_slide_actu').animate({ 
 
     left : 0}, 700); 
 
    }else{ 
 
     $('.container_slide_actu').animate({ 
 
     left : '-100%'}, 700); 
 
    } 
 
    }); 
 
});

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; float: left; width: 50%; height: 30px; padding: 0; line-height: 30px; 
 
    font-size: 14px; color: white; font-family: 'Oswald', Arial, sans-serif; font-weight: bold; 
 
    box-sizing: border-box; 
 
} 
 
.onoffswitch-inner:before { 
 
    content: "Home"; 
 
    padding-left: 10px; 
 
    background-color: #000000; color: #FFFFFF; 
 
} 
 
.onoffswitch-inner:after { 
 
    content: "News"; 
 
    padding-right: 10px; 
 
    background-color: #FFFFFF; color: #000000; 
 
    text-align: right; 
 
} 
 
.onoffswitch-switch { 
 
    display: block; width: 25px; margin: 2.5px; 
 
    background: #FFFFFF; 
 
    position: absolute; top: 0; bottom: 0; 
 
    right: 56px; 
 
    border: 2px solid #999999; border-radius: 20px; 
 
    transition: all 0.3s ease-in 0s; 
 
} 
 
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner { 
 
    margin-left: 0; 
 
} 
 
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch { 
 
    right: 0px; 
 
} 
 
.container_slide_actu{ 
 
    width:100%; 
 
    height:350px; 
 
    z-index:999; 
 
    position:absolute; 
 
    top:0; 
 
    left:-100%; 
 
    display:block; 
 
} 
 
#mavideo { 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 350px; 
 
    object-fit:cover; 
 
} 
 
/*look http://www.alsacreations.com/tuto/lire/1620-une-video-arriere-plan-sur-toute-la-page.html*/

<!DOCTYPE html> 
 
\t <html> 
 
\t <head> 
 
\t \t <title></title> 
 

 
\t <body> 
 

 

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

 
\t \t <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 

 

 
\t </body> 
 
\t </html>

Answer 2

Я добавил console.log('has nothere'); и console.log('nothere not present'); только чтобы убедиться, что если работал и заметил в начале, что оба если и еще условия удовлетворяются одним щелчком мыши.

Не уверен, чего вы пытаетесь выполнить, но я переместил строки класса add/remove внутри анонимной функции, которая будет выполнена после завершения анимации.

$(document).ready(function(){ 

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

switchButton(); 
}); 

Пожалуйста, попробуйте и дайте мне знать.