CODEWITHSUNDEEP
jqueryhtmlcss
nesi
nesi

Reputation: 39

Slide in horizontally (left to right)

How can I slide in my div using jquery after the user has pressed the button "SEE MORE"?

Here's my code. But its not working :(

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>

Upvotes: 0

Views: 85

Answers (2)

Jones Joseph
Jones Joseph

Reputation: 4948

Maybe try something like this? Add a class to the sliding part.
And define animation for that class 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>

Upvotes: 1

Kashkain
Kashkain

Reputation: 523

you don't have any child button inside you button "#press", so you don't match any element with $("#press button"). Also you don't have next element after your button, so you don't match element with $(this).next().

You need to learn more about the JQuery/CSS selector ;)

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

Upvotes: 1

Related Questions