div 上的 jQuery 动画

Question

我想将 div 元素扩展到左侧，或者扩展到 div 之上。现在它扩展到右侧。我也试图在点击后关闭按钮。我刚刚开始艰苦的类(class)，所以很难坚持下去。 这已破了。 这就是我需要的。

https://jsfiddle.net/GreyFox/01sbv4y2/3/

$(function() {
  var $button = $('.btn2');
  $button.on('click', function(e) {
    $(".sidebar2").animate({
      marginleft: "400px",
      opacity: '0.5',
      height: '150px',
      width: '450px',
      margin: '0'
    });

    if ($(this).html() == 'Close') {
      $(this).html('GET MORE INFO');
    } else {
      $(this).html('Close');
    }
  });
});

.sidebar-wrap {}

.sidebar2 {
  padding-top: 90px;
  padding-left: 5px;
  padding-right: 5px;
  min-height: 308px;
  background-color: #2355ce;
}

.hiddenp {
  display: inline-block;
  min-width: 300px;
  min-height: 300px;
  display: none;
  padding: 20px 20px 20px 20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="sidewrap" 
  <div class="sidebar2">
    <h2>MOBILE DEVELOPMENT</h2>
    <p>Have business in your pocket!</p>
    <br>
    <a class="btn2" href="#">details</a>
    <p class="hiddenp">selector is used to select the selector is used to select the</p>
  </div>
</div>

Answer 1

看看这个 - https://jsfiddle.net/01sbv4y2/45/

它会按照您的要求向左扩展。

$(function() {
var $button = $('.btn2');
$button.on('click', function(e) {
    $(".sidebar2").animate({        marginRight: "400px",
    opacity: '0.5',
    height: '150px',
    width: '450px',
    margin: '0'
});

    if ($(this).html() == 'Close') {
        $(this).html('GET MORE INFO');
    } else {
        $(this).html('Close');
    }
});

});