Javascript 我不知道如何将切换变换转换为没有动画的隐藏/显示

我有一个幻灯片布局，可以按照我想要的方式工作。我不知道如何改变切换幻灯片变成一个简单的隐藏显示点击。我创建了一个包含两个链接的容器，可以在其他容器中滑动。我需要改变的功能，而不是幻灯片，但只是出现和消失点击。我不知道如何改变功能

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

HTML

JS

JSFIDLE

像这样的事

我删除了动画并切换了每个动画的可见性

$（文档）.ready（函数（）{
$（'.modslide'）。单击（函数（）{
var hidden=$（'.modhidden'）；
if（hidden.hasClass（'visible'））{
hidden.removeClass（'visible'）；
}否则{
hidden.addClass（'visible'）；
}
});
$（'.modslide2'）。单击（函数（）{
var hidden2=$（'.modhidden2'）；
if（hidden2.hasClass（'visible'））{
hidden2.removeClass（“可见”）；
}否则{
hidden2.addClass（“可见”）；
}
});
});
.modleft、.modhidden、.modhidden2{
浮动：对；
宽度：100%；
高度：350px；
}
.modhidden、.modhidden2{
宽度：100%；
z指数：2；
可见性：隐藏；
位置：绝对位置；
背景:#f90；
颜色：#000；
}
莫德勒先生{
宽度：100%；
浮动：左；
高度：350px；
背景：粉红色；
颜色：#000；
}
莫德克利尔先生{
明确：两者皆有；
}
.可见{
能见度：可见；
}

我来了！
我又来了！
左面板
我建议您只使用一个类，而不是两个。不用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);
    });
});

我来了！
我又来了！
左面板
.modleft、.modhidden{
浮动：对；
宽度：100%；
高度：350px；
}
莫德希德先生{
宽度：100%；
z指数：2；
可见性：隐藏；
位置：绝对位置；
背景:#f90；
颜色：#000；
}
莫德勒先生{
宽度：100%；
浮动：左；
高度：350px；
背景：粉红色；
颜色：#000；
}
莫德克利尔先生{
明确：两者皆有；
}
.可见{
能见度：可见；
}
$（文档）.ready（函数（）{
$（'.modslide'）。单击（函数（）{
$（此）.toggle（0）；
});
});

这似乎更容易维护，因为只有一个函数需要更新。另外，由于没有从DOM中添加/删除类的开销，因此性能可能更高（我没有测试过）
 像这样的？太棒了，是的！！！你怎么看了就知道了！？令人惊叹的你能推荐一些参考资料或书吗？这样我就能更好地分辨语法了。我知道答案就在眼前，但我无法筛选出来。我建议写很多代码。也许仔细阅读这里的答案，看看人们是如何做事的。试着回答问题。这就是我学习的方式，我没有读过任何书或任何东西。你总是可以读到很多东西，但我认为人们在实践中学习得最好。
$(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');
    }
    });
});

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