单击时左右同时滑动两个 div

Question

先生，

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>slide demo</title>
  
  <style>
  .leftpanel1 {
    width: 300px;
    height: 100px;
    background: #ccc;
 position:absolute;
 float:left;
 z-index:100;
 top:0;
 background:red;
  }
  .rightpanel1 {
    width: 695px;
    height: 100px;
    background: #ccc;
 position:absolute;
 float:right;z-index:100;top:0;background:red;right:0;
  }
  
  .leftpanel2 {
    width: 300px;
    height: 100px;
    background: #ccc;
 position:absolute;
 float:left;
 z-index:10;top:0;background:green;
  }
  .rightpanel2 {
    width: 695px;
    height: 100px;
    background: #ccc;
 position:absolute;
 float:right;z-index:10;top:0;background:green;right:0;
  }
  
  .leftpanel3 {
    width: 300px;
    height: 100px;
    background: #ccc;
 position:absolute;
 float:left;
 z-index:1;top:0;background:#ececec;
  }
  .rightpanel3 {
    width: 695px;
    height: 100px;
    background: #ccc;
 position:absolute;
 float:right;z-index:1;top:0;background:#ececec;
 right:0;
  }
  #container{position:absolute;margin:0 auto; width:1000px;height:300px;border:solid 1px red;left:0;right:0;bottom:0;top:100px;}
  </style>
  <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
  <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
</head>
<body>
 
<p>Click anywhere to toggle the box.</p>
<a href="#" id="tog1">switch 1,2</a>
<a href="#" id="tog2">switch 3,4</a>
<a href="#" id="tog3">switch 4,5</a>
<div id="container">
 <div id="toggle1" class="leftpanel1">for switch 1</div><div id="toggle2" class="rightpanel1">for switch 2</div>
 <div id="toggle3" class="leftpanel2">for switch 2</div><div id="toggle4" class="rightpanel2">for switch 3</div>
 <div id="toggle5" class="leftpanel3">for switch 3</div><div id="toggle6" class="rightpanel3">for switch 4</div>
</div>
 
<script>
$(window).load(function(){
 $().ready = function() {
    
  $("#tog1").click(function() {
   $( "#toggle1" ).toggle("slide", { direction: "left" });
   $( "#toggle2" ).toggle("slide", { direction: "right" });
  });
  
  $("#tog2").click(function() {
   $( "#toggle3" ).toggle("slide", { direction: "left" });
   $( "#toggle4" ).toggle("slide", { direction: "right" });
  });
  
  $("#tog3").click(function() {
   $( "#toggle5" ).toggle("slide", { direction: "left" });
   $( "#toggle6" ).toggle("slide", { direction: "right" });
  });
}();
});

</script>
 
</body>
</html>

在上面的代码中，我试图在点击每个开关时滑动 2 个 div。有 3 个开关，每个开关都有 2 个滑动 div。

默认情况下 switch 1,2 应该激活并且 toggle1 & toggle2 应该激活滑入。当单击 switch 3,4 时，switch 1,2 变为非活动状态，它们的两个 div 应该滑出并且 toggle3 & toggle4 应该滑入。如果点击 switch 5,6 然后之前的 div 滑出并且 toggle5 & toggle6 应该会滑入。

希望你能做一些必要的....

Answer 1

不确定这是否是您需要的。

这适用于两个（或更多）div - 一个带滑块（滚动 - 主）和一个不带滑块（从）

//the simultaneous movement of sliders
    $("#master").scroll(function(){//the one you scroll
        sliderPos = $("#master").position(); // get the position
        $("#slave").animate({left:sliderPos.left,},0); // animate the second div
    });

Answer 2

下面是我实现的完整代码......

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>slide demo</title>
  
  <style>
  .leftpanel1 {
    width: 300px;
    height: 100px;
    background: #ccc;
 position:absolute;
 float:left;
 z-index:100;
 top:0;
 background:red;
  }
  .rightpanel1 {
    width: 695px;
    height: 100px;
    background: #ccc;
 position:absolute;
 float:right;z-index:100;top:0;background:red;right:0;
  }
  
  .leftpanel2 {
    width: 300px;
    height: 100px;
    background: #ccc;
 position:absolute;
 float:left;
 z-index:10;top:0;background:green;
  }
  .rightpanel2 {
    width: 695px;
    height: 100px;
    background: #ccc;
 position:absolute;
 float:right;z-index:10;top:0;background:green;right:0;
  }
  
  .leftpanel3 {
    width: 300px;
    height: 100px;
    background: #ccc;
 position:absolute;
 float:left;
 z-index:1;top:0;background:#ececec;
  }
  .rightpanel3 {
    width: 695px;
    height: 100px;
    background: #ccc;
 position:absolute;
 float:right;z-index:1;top:0;background:#ececec;
 right:0;
  }
  #container{position:absolute;margin:0 auto; width:1000px;height:300px;border:solid 1px red;left:0;right:0;bottom:0;top:100px;}
  
  .active{color:red;}
  </style>
  <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
  <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
</head>
<body>
 
 
<a href="#" id="tog1" class="active">switch 1,2</a>
<a href="#" id="tog2">switch 3,4</a>
<a href="#" id="tog3">switch 4,5</a>
<div id="container">
 <div id="toggle1" class="leftpanel1">for switch 1</div><div id="toggle2" class="rightpanel1">for switch 2</div>
 <div id="toggle3" class="leftpanel2">for switch 2</div><div id="toggle4" class="rightpanel2">for switch 3</div>
 <div id="toggle5" class="leftpanel3">for switch 3</div><div id="toggle6" class="rightpanel3">for switch 4</div>
</div>
 
<script>
$(window).load(function(){
 $().ready = function() {
    
  $("#tog1").click(function() {
   $( "#toggle1" ).toggle("slide", { direction: "left" });
   $( "#toggle2" ).toggle("slide", { direction: "right" });
   
   $('#toggle3').hide();
   $('#toggle4').hide();
   $('#toggle5').hide();
   $('#toggle6').hide();
   
   $("#tog1").addClass("active");
   $("#tog2").removeClass("active");
   $("#tog3").removeClass("active");
  });
  
  $("#tog2").click(function() {
   $( "#toggle3" ).toggle("slide", { direction: "left" });
   $( "#toggle4" ).toggle("slide", { direction: "right" });
   
   $('#toggle1').hide();
   $('#toggle2').hide();
   $('#toggle5').hide();
   $('#toggle6').hide();
   
   $("#tog1").removeClass("active");
   $("#tog2").addClass("active");
   $("#tog3").removeClass("active");
  });
  
  $("#tog3").click(function() {
   $( "#toggle5" ).toggle("slide", { direction: "left" });
   $( "#toggle6" ).toggle("slide", { direction: "right" });
   
   $('#toggle1').hide();
   $('#toggle2').hide();
   $('#toggle3').hide();
   $('#toggle4').hide();
   
   $("#tog1").removeClass("active");
   $("#tog2").removeClass("active");
   $("#tog3").addClass("active");
  });
}();
});

</script>
 
</body>
</html>

单击时左右同时滑动两个 div

Slide two divs simultaneously from left and right on click

html

css

jquery

slide