javascript - 同时滑动 2 个 div jQuery

Question

我计划同时滑动 2 个 div，每个都在相反的方向。我该怎么做？

这是我试过的

$("button").click(function () {  
    $(".cuadro").animate({ left: '250px', queue: false });
    $("#R").animate({ left: '-250px', queue: false });
});

另外，如果可能的话，我可以在我的服务选项卡处于事件状态时而不是在用户单击按钮时发生这种情况。

<section id="services" class="content-section text-center">
        <div class="services-section">
            <div class="container">
                <div class="col-lg-8 col-lg-offset-2">
                    <h2><span class="auto-style2">Services</span></h2>
                    <h2>&nbsp;</h2>
                    <h2><strong>Technlogies and lenguages used for software developing<br />
                        </strong></h2>
                    <p  class="btn btn-default btn-lg">Download Resume</p>
                    <p>&nbsp;</p>
                    <button id="serv">serv</button>


               </div>
                <div class="col-lg-9">
                    <div class="cuadro" id="L"><h2 class="leng">C#</h2></div>
                </div>
                <div class="col-lg-3">
                    <div class="cuadro" id="R"><h2 class="leng">JavaScript</h2></div>
                </div>
            </div>
        </div>
    </section>

这是我的导航栏

<div class="collapse navbar-collapse navbar-right navbar-main-collapse">
                <ul class="nav navbar-nav" id="tabs">
                    <!-- Hidden li included to remove active class from about link when scrolled up past about section -->
                    <li>
                        <a href="#page-top">HOME</a>
                    </li>
                    <li>
                        <a class="page-scroll" href="#about">ABOUT</a>
                    </li>
                    <li>
                        <a class="page-scroll" href="#download">RESUME</a>
                    </li>
                    <li>
                        <a class="page-scroll"  id="serTab" href="#services">SERVICES</a>
                    </li>
                    <li>
                        <a class="page-scroll" href="#contact">CONTACT</a>
                    </li>
                </ul>
            </div>

Answer 1

应该这样做:

$('#tabs').tabs();

$('#serTab').click(function(){
    $("#R").animate({left:'-=250px'}); 
    $("#L").animate({left:'+=250px'});
});

请注意 id="tabs"必须从 <ul> 移动到它的 parent <div>

---

如果这不起作用，您可能需要事件委托(delegate)。试试这个:

$(document).on('click', '#serTab', function(){
    $("#R").animate({left:'-=250px'}); 
    $("#L").animate({left:'+=250px'});
});

引用:

http://davidwalsh.name/event-delegate