水平滑动（从左到右）

Question

如何在用户按下按钮“SEE MORE”后使用jquery滑动我的div？

这是我的代码。但它不工作:(

code here <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
<script> 
     $(document).ready(function() { 
      var boxWidth = $("#leftpart").width(); 
      $("#press button").click(function(){ 
       $(this).next().animate({ 
        width: 'toggle' 
       }); 
      }); 
     }); 

<div id="another" style="padding: 120px;"> 
<div class="container"> 
    <div class="row"> 
     <!-- right --> 
     <div class="col-lg-6 col-md-6"> 
      <center><button type="button" class="seemore" id="press">See More</button></center> 
       <div id="leftpart" style="height: 540px; margin-right: 50px; background: yellow; display: none; position: relative;"> 
       <p>HELLOOOOOOO</p> 
       </div> 
     </div> 
    </div> 
</div> 
</div> 

Answer 1

也许尝试这样的事情？一类添加到滑动部分。
而在CSS定义动画该类？

$(document).ready(function() { 
 

 
    $(".seemore").click(function() { 
 
    $('#leftpart').addClass('slideIn'); 
 
    }); 
 
});

.more { 
 
    height: 540px; 
 
    margin-right: 50px; 
 
    background: yellow; 
 
    display: none; 
 
    position: relative; 
 
} 
 

 
.animate.slideIn { 
 
    transform: translateX(0); 
 
    animation: slideFromLeft 0.3s ease; 
 
    display: block; 
 
} 
 

 
@keyframes slideFromLeft { 
 
    from { 
 
    transform: translateX(-50%); 
 
    display: none; 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="another" style="padding: 120px;"> 
 
    <div class="container"> 
 
    <div class="row"> 
 
     <!-- right --> 
 
     <div class="col-lg-6 col-md-6"> 
 
     <center><button type="button" class="seemore" id="press">See More</button></center> 
 
     <div id="leftpart" class="more animate"> 
 
      <p>HELLOOOOOOO</p> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 2

你内部没有任何子按钮“#press”，所以你不用$（“＃按钮”）匹配任何元素。 您的按钮后面也没有下一个元素，因此您不会使用$（this）.next（）匹配元素。

您需要了解更多关于JQuery的/ CSS选择器）

$(document).ready(function() { 
 
    var boxWidth = $("#leftpart").width(); 
 
    $("#press").click(function(){ 
 
     $("#leftpart").animate({ 
 
      width: 'toggle' 
 
     }); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="another" style="padding: 120px;"> 
 
<div class="container"> 
 
    <div class="row"> 
 
     <!-- right --> 
 
     <div class="col-lg-6 col-md-6"> 
 
      <center><button type="button" class="seemore" id="press">See More</button></center> 
 
       <div id="leftpart" style="height: 540px; margin-right: 50px; background: yellow; display: none; position: relative;"> 
 
       <p>HELLOOOOOOO</p> 
 
       </div> 
 
     </div> 
 
    </div> 
 
</div> 
 
</div>