jQuery/HTML - 水平滚动

Question

我在滚动时遇到了麻烦......我想要做的是点击一个按钮后，让一个div向左滚动，另一个滚动向右/一个向外，第二个。但是我可以'找到任何解决方案，我有困难迫使第二个div旁边的第一个隐藏它...任何想法？

Website

Answer 1

我看了你的问题，这是我所理解的;

您正在尝试动画与另一格一格，这里是解决方案：

查看了工作示例小提琴：http://jsfiddle.net/HNY7R/

HTML

<div id="container"> 
    <div class="main"></div> 
    <div class="second"></div> 
</div> 

<input type="button" id="push" value="push me" /> 

CSS

#container 
{ width: 400px; height: 200px; position: relative; border:1px solid black; overflow: hidden; } 

.main 
{ width: 400px; height: 200px; position: absolute; left: 0; top: 0; background: green; } 

.second 
{ width: 400px; height: 200px; position: absolute; left: 400px; top: 0; background: red; } 

jQuery

$('#push').click(function(){ 

     var main = $('.main').css('left'); 
     var second = $('.second').css('left'); 

     if(main == '-400px'){ 
      $('.second').animate({ 'left' : '400px' }, 500); 
      $('.main').animate({ 'left' : '0px' }, 500); 
     } else { 
      $('.second').animate({ 'left' : '0px' }, 500); 
      $('.main').animate({ 'left' : '-400px' }, 500); 
     } 


    });