トグル変換をアニメーションなしの非表示/表示にする方法はわかりません。

Question

私は必要な方法で動作するスライドレイアウトを持っています。私はtoggleSlideをクリックすると簡単なhide showに変更する方法を知らない。他のコンテナにスライドする2つのリンクを持つコンテナを作成しました。スライドさせないように機能を変更する必要がありますが、クリックすると表示され消えます。私はどのように機能を変更するか分からない。

HTML

<div class="modhidden">Here I am ! 

<!--<a href="#" class="modslide">Update</a>--> 

    <a href="#" class="modslide col-xs-12 left-btn btn btn-primary">Update</a> 

</div> 

<div class="modhidden2">Here I am AGAIN! 

<!--<a href="#" class="modslide2">Update</a>--> 
    <a href="#" class="modslide2 col-xs-12 left-btn btn btn-primary">Update</a> 

</div> 

<div class="modleft">Left panel 

<a href="#" class="modslide">Show ONE</a> 

<a href="#" class="modslide2">The other ONE</a> 

</div> 

<div class="modclear"></div> 

CSS

.modleft, .modhidden, .modhidden2 { 
    float: right; 
    width: 100%; 
    height:350px; 
} 

.modhidden, .modhidden2 { 
    width:100%; 
    z-index:2; 
    position:absolute; 
    right:-1000px; 
    background:#f90; 
    color:#000; 
} 

.modleft { 
    width:100%; 
    float: left; 
    height:350px; 
    background: pink; 
    color: #000; 
} 

.modclear { 
    clear:both; 
} 

JS

$(document).ready(function(){ 
    $('.modslide').click(function(){ 
    var hidden = $('.modhidden'); 
    if (hidden.hasClass('visible')){ 
     hidden.animate({"right":"-1000px"}, "slow").removeClass('visible'); 
    } else { 
     hidden.animate({"right":"0px"}, "slow").addClass('visible'); 
    } 
    }); 

    $('.modslide2').click(function(){ 
    var hidden2 = $('.modhidden2'); 
    if (hidden2.hasClass('visible')){ 
     hidden2.animate({"right":"-1000px"}, "slow").removeClass('visible'); 
    } else { 
     hidden2.animate({"right":"0px"}, "slow").addClass('visible'); 
    } 
    }); 
}); 

JSFIDDLE

https://jsfiddle.net/galnova/jgyt1svb/

Answer 1

これって何？

アニメーションを削除し、それぞれのアニメーションの表示を切り替えます。

$(document).ready(function(){ 
 
    $('.modslide').click(function(){ 
 
    var hidden = $('.modhidden'); 
 
    if (hidden.hasClass('visible')){ 
 
     hidden.removeClass('visible'); 
 
    } else { 
 
     hidden.addClass('visible'); 
 
    } 
 
    }); 
 
    
 
    $('.modslide2').click(function(){ 
 
    var hidden2 = $('.modhidden2'); 
 
    if (hidden2.hasClass('visible')){ 
 
     hidden2.removeClass('visible'); 
 
    } else { 
 
     hidden2.addClass('visible'); 
 
    } 
 
    }); 
 
});

.modleft, .modhidden, .modhidden2 { 
 
    float: right; 
 
    width: 100%; 
 
    height:350px; 
 
} 
 

 
.modhidden, .modhidden2 { 
 
    width:100%; 
 
    z-index:2; 
 
    visibility: hidden; 
 
    position:absolute; 
 
    background:#f90; 
 
    color:#000; 
 
} 
 

 
.modleft { 
 
    width:100%; 
 
    float: left; 
 
    height:350px; 
 
    background: pink; 
 
    color: #000; 
 
} 
 

 
.modclear { 
 
    clear:both; 
 
} 
 

 
.visible { 
 
    visibility: visible; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="modhidden">Here I am ! 
 

 
<!--<a href="#" class="modslide">Update</a>--> 
 

 
    <a href="#" class="modslide col-xs-12 left-btn btn btn-primary">Update</a> 
 
    
 
</div> 
 

 
<div class="modhidden2">Here I am AGAIN! 
 

 
<!--<a href="#" class="modslide2">Update</a>--> 
 
    <a href="#" class="modslide2 col-xs-12 left-btn btn btn-primary">Update</a> 
 
    
 
</div> 
 

 
<div class="modleft">Left panel 
 

 
<a href="#" class="modslide">Show ONE</a> 
 

 
<a href="#" class="modslide2">The other ONE</a> 
 

 
</div> 
 

 
<div class="modclear"></div>

Answer 2

私はあなたが唯一のクラスの代わりに、2を使用することを示唆しています。 modslideとmodslide2の代わりに、modslideを使用してください。また、状態を追跡するためにクラスを追加/削除する代わりに、jqueryのtoggle（）関数を試してみてください。

<div class="modhidden">Here I am ! 

<!--<a href="#" class="modslide">Update</a>--> 

    <a href="#" class="modslide col-xs-12 left-btn btn btn-primary">Update</a> 

</div> 

<div class="modhidden">Here I am AGAIN! 

<!--<a href="#">Update</a>--> 
    <a href="#" col-xs-12 left-btn btn btn-primary">Update</a> 

</div> 

<div class="modleft">Left panel 

<a href="#" class="modslide">Show ONE</a> 

<a href="#" class="modslide">The other ONE</a> 

</div> 

<div class="modclear"></div> 


.modleft, .modhidden { 
    float: right; 
    width: 100%; 
    height:350px; 
} 

.modhidden { 
    width:100%; 
    z-index:2; 
    visibility: hidden; 
    position:absolute; 
    background:#f90; 
    color:#000; 
} 

.modleft { 
    width:100%; 
    float: left; 
    height:350px; 
    background: pink; 
    color: #000; 
} 

.modclear { 
    clear:both; 
} 

.visible { 
    visibility: visible; 
} 


$(document).ready(function(){ 
    $('.modslide').click(function(){ 
     $(this).toggle(0); 
    }); 
}); 

更新する機能が1つしかないため、このように思えます。また、DOMからクラスを追加/削除するオーバーヘッドがないので、よりパフォーマンスの高い（これはテストしていません）可能性があります。