Einschieben horizontal (von links nach rechts)

Question

Wie kann ich meinen div mit jquery einschieben, nachdem der Benutzer den Knopf "SEE MORE" gedrückt hat?

Hier ist mein Code. Aber es funktioniert nicht :(

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

Vielleicht so etwas wie diese versuchen? Fügen Sie eine Klasse mit dem Schiebeteil.
Und definieren Animation für diese Klasse in 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

Sie haben keine Schaltfläche für Kinder in der Schaltfläche "#press", so dass Sie kein Element mit $ ("# drücken Sie die Taste") übereinstimmen. Sie haben auch nicht das nächste Element nach Ihrer Schaltfläche, so dass Sie kein Element mit $ (this) .next() abgleichen.

Sie müssen mehr über die JQuery/CSS-Selektor lernen;)

$(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>