Javascript 如何在jquery中从右向左切换div

我有一把小提琴，我试图创建一个浮动div，它应该从右向左切换

我对UI非常陌生，所以我的代码有点凌乱

这是我的密码和密码

$（“.widget toggle btn”）。单击（函数（）{
//设置效果类型
var效应='滑动'；
//设置所选效果类型的选项
//var options={direction:$（'.mySelect'）.val（）}；
//设置持续时间（默认值：400毫秒）
var持续时间=500；
$（'.widget'）.toggle（效果“右”，持续时间）；
});
.widget{
-moz边界半径：4px；
-webkit边界半径：4px；
边界半径：0px 4px 4px；
填充：1.0005雷姆；
-moz盒阴影：1px2px2pRGBA（0,0,0,0.1）；
-webkit盒阴影：1px2px2pRGBA（0,0,0,0.1）；
盒影：1px2p2pRGBA（0,0,0,0.1）；
浮动：对；
宽度：87%；
}
1.把家里的人放在一边{
填充：1.3125雷姆0；
左侧填充：1.3125雷姆；
右侧填充：1.3125雷姆；
浮动：左；
}
.了解更多{
背景：#16a085；
颜色：#fff；
}
.widget切换btn{
宽度：46px；
高度：84px；
浮动：左；
边界半径：4px 1px 1px 4px；
左侧填充：4px；
}




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

您可以在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');

});

这是您的更新代码
 很抱歉，我无法添加注释，但该按钮已修复，因为它没有类。widget
此行中有错误：

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

“效果”和“持续时间”是属性名称。。你不能只是复制它然后希望它能工作。
如果要修复它，请将其更改为：

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

但是如果您想学习，请阅读一些jQuery教程
这个例子：

祝你好运
 您错过了jQuery ui库。
在您的小提琴中，您调用了多次jquery，jqueryui库。
$（“.widget toggle btn”）。单击（函数（）{
警报（“ss”）；
//设置效果类型
var效应='滑动'；
//设置所选效果类型的选项
//var options={direction:$（'.mySelect'）.val（）}；
//设置持续时间（默认值：400毫秒）
var持续时间=500；
/*$（'.widget'）。设置动画({
宽度：“切换”
}, 400);*/
$（'.widget'）.toggle（效果，'left'，持续时间）；
});
.widget{
-moz边界半径：4px；
-webkit边界半径：4px；
边界半径：0px 4px 4px；
填充：1.0005雷姆；
-moz盒阴影：1px2px2pRGBA（0,0,0,0.1）；
-webkit盒阴影：1px2px2pRGBA（0,0,0,0.1）；
盒影：1px2p2pRGBA（0,0,0,0.1）；
浮动：对；
宽度：87%；
}
1.把家里的人放在一边{
填充：1.3125雷姆0；
左侧填充：1.3125雷姆；
右侧填充：1.3125雷姆；
浮动：左；
}
.了解更多{
背景：#16a085；
颜色：#fff；
}
.widget切换btn{
宽度：46px；
高度：84px；
浮动：左；
边界半径：4px 1px 1px 4px；
左侧填充：4px；
左边距：19px；
}




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



div.mydiv{
宽度：0px；
高度：100px；
位置：绝对位置；
左：70像素；
顶部：20px；
背景颜色：橙色；
溢出：隐藏；
文本对齐：居中；
颜色：白色；
}
#我的按钮{
宽度：70px；
高度：100px；
颜色：白色；
位置：绝对位置；
顶部：20px；
左：0px；
背景色：黑色；
颜色：橙色；
}
你好。。。。。。
点击我
鱼际变异=0；
$（“#我的按钮”）。单击（函数（）{
鱼际=鱼际+1；
如果（n%2！=0）
{
$（“div.mydiv”）.animate（{width:500}，1000）；
}
其他的
{
$（“div.mydiv”）.animate（{width:0}，1000）；
}
});
这种效果不需要jQuery。使用
css转换
更有效


const button=document.querySelector（'button'））
const-box=document.querySelector（“.box”）
addEventListener（'click'，function（）{
box.classList.toggle（'show'）
})
正文{
背景色：中绿色；
}
钮扣{
边框：1px实心#fff；
边界半径：3px；
背景：无；
填充物：5px；
保证金：5px；
}
.盒子{
显示：内联块；
填充：10px；
保证金：5px；
背景色：海绿；
变换：scaleX（0）；
变换原点：左；
转换：转换500ms缓进缓出；
}
.表演{
变换：scaleX（1）；
}
切换
我只是一个简单的盒子！
好，为什么我的按钮总是固定的？它还应该将lft和另一个div一起向右移动？用于切换[小提琴]。或者单更改检查我下面的答案。我如何使其从右向左？我还希望该按钮与div一起移动，因此，一旦表单隐藏，只有按钮显示在右侧，我想制作类似的内容，但在jquery中，我看到您今天回答了，但我能够做到，无论如何，谢谢