jQueryで.animate（）が動作しない場合

Question

私はjQueryの専門家ではなく、種類のボタントグルを作成しようとしています： 「ホーム/ニュース "、コンテンツも切り替える必要があります。

しかし、それはうまくいかないようです... if条件にもかかわらず、条件と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(); });

感謝。

**編集

詳しい説明（ご希望の場合は、単純にする）：私は2個のHTMLコンテナを持って

。ボタンをクリックすると、そのボタンを切り替える必要があります。デフォルトでは、私はコンテナ1を持っています。私がodd => container2をクリックすると;私も=> container1をクリックすると...

いくつかのスクリーンショット

は説明する：バナーの上に来る

私のウェブサイトの-Theバナーを（スクリーンショットのデフォルト=> container1（1））、スライドショー（ =>にcontainer2（スクリーンショットの2））：http://prntscr.com/dpwxat

Answer 1

あなたのアニメーションが出入りする理由は、onclickが2回実行されているためです。その理由は、 "onoffswitch"クラスをターゲットにしているからです。代わりに "#myonoffswitch"をターゲットとすると、そのIDは1つのものだけをターゲットにし、1回だけ発火します。あなたの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(); 
}); 

私に連絡してください。