javascript - 如何在jquery中从右到左切换div

Question

我有这个 fiddle ，我正在尝试创建一个应该从右到左切换的 float div。

我对 UI 很陌生，所以我的代码有点乱

这是我的代码和FIddle

$(".widget-toggle-btn").click(function() {
  // Set the effect type
  var effect = 'slide';

  // Set the options for the effect type chosen
  //var options = { direction: $('.mySelect').val() };

  // Set the duration (default: 400 milliseconds)
  var duration = 500;

  $('.widget').toggle(effect, 'right', duration);
});

.widget {
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  border-radius: 0px 4px 4px 4px;
  padding: 1.0005rem;
  -moz-box-shadow: 1px 2px 2px rgba(0, 0, 0, 0.1);
  -webkit-box-shadow: 1px 2px 2px rgba(0, 0, 0, 0.1);
  box-shadow: 1px 2px 2px rgba(0, 0, 0, 0.1);
  float: right;
  width: 87%;
}
.home-body aside {
  padding: 1.3125rem 0;
  padding-left: 1.3125rem;
  padding-right: 1.3125rem;
  float: left;
}
.find-out-more {
  background: #16a085;
  color: #fff;
}
.widget-toggle-btn {
  width: 46px;
  height: 84px;
  float: left;
  border-radius: 4px 1px 1px 4px;
  padding-left: 4px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<aside class="col-md-4">
  <div id="popup-x">
    <div class="widget-toggle-btn find-out-more ">
      Click me to toggle him!
    </div>
    <div class="widget find-out-more  ">
      <form action="" name="learn-more" id="learn-more" method="POST">
        <h5 id="head-element" name="head-element">For Admissions, Enroll Now!</h5>
        <input type="email" name="emailId" id="emailId2" placeholder="Email address">
        <div id="emailError2" style="margin-top:-15px;font-size:12px;display:none"></div>
        <input type="text" id="name2" name="name" placeholder="Full Name" title="Full Name">
        <div id="nameError2" style="margin-top:-15px;font-size:12px;display:none"></div>
        <input type="tel" id="phoneNumber2" name="phoneNumber" placeholder="Phone Number" maxlength="13" onkeypress="return isNumberKey(event)">
        <div id="phoneError2" style="margin-top:-15px;font-size:12px;display:none"></div>
        <div id="image-load"></div>
        <input id="courseSelection" name="courseSelection" title="Course" type="hidden" value="" />
        <input id='redirectionUrl' type='text' style='display:none;' name='redirectionUrl' value='/' />
        <input type='hidden' style='display:none;' name='leadGroup' value='pondi' />
        <input type="submit" class="button" onclick="return validatePhone()" value="SUBMIT" />
      </form>

      <p class="disclaimer-popup">*Please note that by filling the form, you are agreeing to our terms & conditions in the <a href="disclaimer" class="disclaimer-popup-link" target="_blank">disclaimer section</a>.</p>
    </div>
  </div>
  <br>
</aside>

因此，如果您单击该切换按钮，我将收到 错误消息，即 n.easing[this.easing] 不是函数

谁能帮我解决一下谢谢

Answer 1

您可以在 jquery 中使用浮点值。

    $(".widget-toggle-btn").click(function() {
  alert('ss');
  // Set the effect type
  var effect = 'slide';

  // Set the options for the effect type chosen
  //var options = { direction: $('.mySelect').val() };

  // Set the duration (default: 400 milliseconds)
  var duration = 500;
 /* $('.widget').animate({
    width: 'toggle'
  }, 400);*/
  $('.widget').css('float','left');
    $('.widget-toggle-btn').css('float','right');

});

这是您的更新代码。 https://jsfiddle.net/KFmLv/6753/