我有几个隐藏的DIV,我想为slideToggle制作动画。所有按钮都具有链接以滚动到匹配的DIV。
问题是当我单击按钮时,滚动在到达DIV之前已停止。那么如何使用.slideToggle完成和动画化滚动(即慢速滚动)?
$(document).ready(function() {
$(".menu").hide();
$(".tog").click(function() {
$(".menu:visible").toggle();
if (!$("." + $(this).data('id')).is(':visible')) {
$("." + $(this).data('id')).slideToggle();
}
});
});
.edsContenu {
padding: 5px;
text-align: center;
background-color: #00011f;
display: none;
height:200px;
}
.bridgeContenu{
padding: 5px;
text-align: center;
background-color: #00011f;
display: none;
height:200px;
}
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
<div id="discovered">
<div id="file" class="container">
<a href="#edsContenu" class="tog" data-id="edsContenu" id='showEDS'> <input id="eds" type="image" src="IMAGES/PNG/eds.png" alt="EDS system" height="250px" width="250px" /></a>
</div>
<div id="file" class="container">
<a href="#bridgeContenu" class="tog" data-id="bridgeContenu" id='showBridge'><input id="bridge" type="image" src="IMAGES/PNG/pont.png" alt="pont photonique" height="250px" width="250px" /></a>
</div>
<div id="edsContenu" class="menu edsContenu">
<section id="content">
<div id="text">
</div>
</section>
</div>
<div id="bridgeContenu" class="menu bridgeContenu">
<section id="content">
<div id="text">
</div>
</section>
</div>
答案 0 :(得分:1)
对代码进行了一些更改,请阅读注释
$(document).ready(function() {
$(".menu").hide();
$(".tog").click(function() {
var id = "#" + $(this).data('id')
// hide all menu except the current one, otherwise using
// $(".menu:visible").hide() and using $(id).is(':hidden') after is really pointless
$(".menu:visible:not('"+id+"')").toggle();
if ($(id).is(':hidden')) {
$(id).toggle("fast", function(){
// after toggle is finished then animate scrollto
$("html, body").animate({ scrollTop: $(id).offset().top }, 1000);
});
}
});
});
.menu{
background:red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="discovered">
<div id="file" class="container">
<a href="#research" class="tog" data-id="edsContenu" id='showEDS'> <input id="eds" type="image" src="IMAGES/PNG/eds.png" alt="EDS system" height="250px" width="250px" /></a>
</div>
<div id="file" class="container">
<a href="#research" class="tog" data-id="bridgeContenu" id='showBridge'><input id="bridge" type="image" src="IMAGES/PNG/pont.png" alt="pont photonique" height="250px" width="250px" /></a>
</div>
<div id="edsContenu" class="menu edsContenu">
<section id="content">
<div id="text">
test edsContenu
</div>
</section>
</div>
<div id="bridgeContenu" class="menu bridgeContenu">
<section id="content">
<div id="text">
test bridgeContenu
</div>
</section>
</div>