.animate（）jQuery中，如果條件似乎不工作

Question

我不是在jQuery的專家，我試圖創造一種按鈕切換的： 當我點擊切換按鈕「首頁/新聞「，內容也應該切換。

，但似乎不工作......儘管if條件，條件和其他執行......我不明白這一點。有人可以告訴我我哪裏失敗了？

這裏是的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容器。當我點擊按鈕時，我想切換它們。默認情況下，我得到了container1;當我點擊odd => container2;當我點擊即使=> container1 ...

一些截圖來解釋：

我的網站-The旗幟（在屏幕截圖默認=> container1（1））和幻燈片（誰過來的旗幟=> container2的（2截圖））：http://prntscr.com/dpwxat

Answer 1

原因動畫出入是因爲的onclick運行兩次。原因是因爲你將目標鎖定在「onoffswitch」課堂上，而你有不止一門課程。如果你的目標是「#myonoffswitch」，那麼它就是一個id，只針對一件事而且只會觸發一次。我也清理了一下你的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');只，以確保如果是工作，在那兩個如果和其他條件得到滿足開始注意到在一次點擊。

不知道你是什麼努力來完成，但是我感動的添加/刪除一個匿名函數內班線將執行一次動畫已經完成。

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

請試着讓我知道。