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

Question

我有这个小提琴，我试图创建一个浮动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>

因此，如果您点击该切换按钮，我会收到error that n.easing[this.easing] is not a function

任何人都可以帮我解决这个问题

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/

Answer 2

您需要下载jquery ui插件。所有效果都绑定在一个文件中。

Link for Jquery UI Effects

Answer 3

抱歉，我无法添加评论，但该按钮已修复，因为它没有类.widget

Answer 4

此行中有错误：

$('.widget').toggle(effect,'left', duration);

'效果'和'持续时间'是属性名称..你不能只是复制它，并希望它会起作用。 如果要修复它，请将其更改为：

$('.widget').toggle('left');

但是如果你想学习，请阅读一些jQuery教程 例如：http://www.w3schools.com/jquery/

祝你好运！

Answer 5

你错过了jQuery ui库。 在你的https://jsfiddle.net/KFmLv/6752/小提琴中，你调用了多个时间jquery，jquery ui库。

＆＃13;

＆＃13;

$(".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').toggle(effect,'left', duration);
});

＆＃13;

.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;
  margin-left: 19px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.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>

＆＃13;

＆＃13;

＆＃13;

<强>更新

＆＃13;

＆＃13;

$(".widget-toggle-btn").click(function() {
  var effect = 'slide';
  var options = { direction: 'right' };
  var duration = 500;
  $('.widget').toggle(effect, options, duration);
});

＆＃13;

.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%;
  display: none;
}

.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;
  margin-left: 19px;
}
#popup-x{
    position: absolute;
    right: 0;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.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>

＆＃13;

＆＃13;

＆＃13;

Answer 6

你也可以这样做。参考工作演示

＆＃13;

＆＃13;

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
	
</head>

<style type="text/css">

div.mydiv{
	width: 0px;
	height: 100px;
	position: absolute;
	left: 70px;
	top: 20px;
	background-color: orange;
	overflow: hidden;
	text-align: center;
	color: white;

}

#mybutton{
	width: 70px;
	height: 100px;
	color: white;
	position: absolute;
	top:20px;
	left:0px;
	background-color: black;
	color: orange;
}

</style>


<body>

<div class="mydiv">Hello StackOverflow ......</div>
<button id="mybutton">Click on me</button>

<script type="text/javascript">

var theNum = 0;

$("#mybutton").click(function(){
	theNum = theNum +1;
	
	if(theNum%2 != 0)
	{
		$("div.mydiv").animate({width:500},1000);
	}
	else
	{
		$("div.mydiv").animate({width:0},1000);
	}
});


</script>




</body>


</html>

＆＃13;

＆＃13;

＆＃13;

注意：此答案适用于您的请求。请参阅下面的工作demo.click按钮查看。希望这对你有所帮助。根据需要更改位置和大小。

＆＃13;

＆＃13;

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
	
</head>

<style type="text/css">

div.holder{
	width: 400px;
	height: 600px;
	position: absolute;
	right: 0;

}

div.holder div.formholder{
	width: 0px;
	height: 600px;
	background-color: orange;
	position: absolute;
	right: 0;
}

#mybutton{
	width: 50px;
	height: auto;
	position: absolute;
	right: 0px;
}



</style>


<body>

<div class="holder">
	<div class="formholder"></div>
	<button id="mybutton">C<br>L<br>I<br>C<br>K<br><br> O<br>N<br> <br>M<br>E</button>
</div>

<script type="text/javascript">

var my_val = 0;
$("#mybutton").click(function(){
	my_val = my_val+1;

	if (my_val%2 != 0) 
	{
		$("div.formholder").animate({width:300},1000);
		$("#mybutton").animate({right:300},1000);
	}
	else
	{
		$("div.formholder").animate({width:0},1000);
		$("#mybutton").animate({right:0},1000);
	}
});


</script>




</body>


</html>

＆＃13;

＆＃13;

＆＃13;

Answer 7

这个效果你不需要jQuery。使用css transforms执行此操作会更高效。

const button = document.querySelector('button')
const box = document.querySelector('.box')
button.addEventListener('click', function() {
    box.classList.toggle('show')
})

body {
    background-color: mediumseagreen;
}

button {
    border: 1px solid #fff;
    border-radius: 3px;
    background: none;
    padding: 5px;
    margin: 5px;
}

.box {
    display: inline-block;
    padding: 10px;
    margin: 5px;
    background-color: seagreen;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 500ms ease-in-out;
}

.show {
    transform: scaleX(1);
}

        <button>Toggle</button>
        <div class="box">
            I'm just a simple box!
        </div>