Question

我打算同时滑动2个div，每个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>移至其父<div>

如果这不起作用，您可能需要事件委派。试试这个：

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

参考：

http://davidwalsh.name/event-delegate

同时幻灯片2 divs jQuery

1 个答案: