代码之家 › 专栏 › 技术社区 › Haox

如何将slideToggle与动画和自动滚动相关联以达到匹配的DIV?

css html jquery javascript

Haox · 技术社区 · 5 年前

我有几个隐藏的div,我想动画幻灯片切换。所有按钮都有链接可以滚动到匹配的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 回复 | 直到 5 年前

Alen.Toma 5 年前

$(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>