程序员经验分享-hwhale

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

2024-03-27

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

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

这是我的代码和FIddle https://jsfiddle.net/KFmLv/6752/

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

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


您可以在 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/ https://jsfiddle.net/KFmLv/6753/

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

javascript

jQuery

html

css

如何在jquery中从右到左切换div 的相关文章

  • 为什么有人将（Apache mod_expires 参数）ExpiresByType 设置为“访问加 0 秒”？

    在审查答案时这个帖子 https stackoverflow com questions 9933012 how to use mod headers and mod expires to cache 我不明白为什么这里使用 0 秒作为最佳

  • 在 JavaScript 中引用 C# 变量

    我已经阅读了很多线程 但我不明白为什么这不起作用 我正在创建一个将用作导航栏的 SharePoint Web 部件 一切都很顺利 直到我尝试在 JS 代码中引用 C 变量 这是来自 VisualWebPart1UserControl asc

  • 使用 Jasmine 模拟 jQuery ajax 调用

    我正在使用 Jasmine 2 5 2 为使用 jQuery 3 1 1 执行 Ajax 请求的代码编写单元测试 我想模拟 Ajax 调用 提供我自己的响应状态和文本 我正在使用 Jasmine ajax 插件 https github c

  • ajax 调用成功后点击链接 href

    我有一个正常的链接 a href http www google com class continue Continue a 我已将点击绑定到一个事件来发布 ajax 请求 如下所示 continue click function ajax

  • Twitter bootstrap 远程模式每次都显示相同的内容

    我正在使用 Twitter bootstrap 我已经指定了一个模式 div class modal hide div class modal header div div

  • Antd 选择搜索框未呈现匹配项

    我有产品数据 我正在使用搜索值过滤数据 然后使用过滤后的数据呈现选项 产品数据作为道具来自全局 redux 存储 由于某种原因 下拉列表仅在搜索值为空时显示数据 当我开始输入时 filteredData已更新 组件也重新渲染 但选项不显示任

  • 什么是闭包编译器？

    如果您不知道我在说什么 请查看以下内容 http closure compiler appspot com home http closure compiler appspot com home 这是一个 JavaScript 压缩器 在他

  • 使用 Google 地图 API 进行反向地理编码

    我正在研究 JavaScript Google Map API 版本 3 更准确地说 正在研究反向地理定位 在 的帮助下官方文档 http code google com intl fr apis maps documentation ge

  • 如何消除 jQuery Mobile 中的悬停延迟？

    我正在使用 jQuery Mobile 制作一个网站 当我将鼠标悬停在按钮上时 它会更改其类 并扩展其颜色 但感觉需要半秒左右才能完成 有没有办法减少这种延迟 您可以覆盖hoverDelay无需修改 jQuery Mobile js 库 要

  • 如何制作实时jquery效果？

    我想制作一个实时提要阅读器 并且我想要一个解决方案 使新项目无需刷新页面即可出现 并且具有像friendfeed一样的滚动效果 你可以在这里看到我在说什么 http www vimeo com 4029954 http www vimeo

  • jQuery clone() 复制数据...有时...？

    使用下面的示例 我有一个tr我正在复制 它包含一个 jQueryautocomplete 第一次克隆时 自动完成功能不起作用 因为附加的data items 一片空白 第二次单击 添加 按钮时 自动完成功能将起作用 此后 再次单击 添加 会

  • 具有 MVC4 风格捆绑的 Intellisense

    到目前为止我找不到问题或解决这个问题 我确信我错过了一些简单的事情 我有一个带有一堆缩小的 CSS 的样式包 并且我正在用里面的类来装饰 HTML 元素 一切都运转良好 然而 Intellisense 和 ReSharper 都因为 CSS

  • HTML 文本框，自动突出显示文本

    我将如何制作一个包含预先存在的文本的文本框 当用户在其中单击时 其中的所有文本都会突出显示 例如 YouTube 在其视频上使用嵌入代码的文本框的方式相同 谢谢 如果我正确理解你的问题 你可以使用一些javascript 未经测试的代码

  • 让管道自我刷新角度

    我有来自后端的静态时间戳 我想每 1 秒刷新一次管道以获取现在的日期 这是我的烟斗 import Pipe PipeTransform from angular core import moment from moment Pipe nam

  • TinyMCE：将 CSS 类属性与 formatselect-dropdown 格式结合使用

    我想定制格式 http wiki moxiecode com index php TinyMCE Configuration theme advanced blockformats在 TinyMCE 中格式选择下拉菜单 http wiki

  • Escape String - 在 Javascript 中输出rails字符串[重复]

    这个问题在这里已经有答案了 我正在尝试将字符串值分配给 erb 文件中的 javascript 对象 如下所示 var data name 问题是 如果name is Tom s small ears 的输出data name将会Tom x

  • RemoveEventListener 在 Firefox 版本 58 中不起作用

    但它在 Chrome 中有效 这是我的 UI EventBus 代码 原型 addEventListener方法是一样的 只不过remove换成了add UI EventBus removeEventListener function ob

  • 我可以使用 :hover 触发 CSS3 动画（或过渡），即使鼠标不再悬停，该动画也会继续运行

    我正在创建一个链接列表 其中一个链接容器在悬停时会展开 包含详细信息 图像和说明 我用 CSS 过渡或动画来制作动画没有任何问题 问题是我希望它即使在鼠标移开后也能保持展开状态 我想在没有 JavaScript 的情况下做到这一点 那可能吗

  • ESLint 如何集成到 Create React App 中？

    当我跑步时npx create react app some name 为我创建了一个简单的 React 项目 当我随后窥视package json 似乎有一些 ESLint 存在的证据 因为有 eslintConfig extends r

  • 将记录转换为序列化表单数据以通过 HTTP 发送

    有没有办法转换此记录 TError record code Word message String end TState record caption String address Cardinal counters TArray

随机推荐

  • RMarkdown - 使用 kable 的表格中的不同字体类型？

    我正在使用 RMarkdown 生成 pdf 文档 是否可以使用 kable styling 更改表格中的字体类型 如果没有 您能推荐其他包吗 library dplyr library kableExtra kable mtcars al

  • 将转义字符发送到打印机

    我正在开发一个 C 应用程序 用于从 SATO 热转印打印机 CG408 TT 打印标签 为此 我使用 SBPL SATO 编程语言 看起来像下面这样

  • C++ 使用不同的流读取和写入同一文件

    我有两个流指向同一个文件 第一个是std ofstream os第二个是std ifstream is 都以二进制模式打开 我在用着os创建一个新文件 文件创建过程需要我 有时 读取写入文件的数据os The is流寻找所需的位置 读取一些

  • 实体框架一对零或一对关系，没有导航属性

    由于 FK 限制 我在尝试删除记录时遇到了问题 因此 我回到了绘图板 并试图指定这种关系应该如何运作 这是我的代码第一类 public class MemberDataSet Key DatabaseGeneratedAttribute D

  • 如何在 Linux 中打开程序的多个实例

    例如 要打开多个实例gedit编辑器我写了一个像这样的shell脚本 gedit gedit gedit gedit 但是在我运行我的 shell 脚本之后 example sh 我只能找到一个 gedit 实例 我什至用过 运算符 以便

  • ObjectSpace.count_objects 中每个哈希值的含义是什么？

    在 ruby 1 9 3 中 我使用 ObjectSpace 来检查内存问题 ObjectSpace count objects 返回一个哈希值 如下所示 TOTAL gt 1004232 FREE gt 258543 T OBJECT g

  • 锁定 MongoDB 中的文档

    我在网络应用程序中使用 pymongo 并且想要执行以下形式的操作 doc collection find document doc array1 append foo for y in doc array2

  • Analysis_options.yaml 中包含多个内容？

    我想组合两个 或更多 analysis options yaml我的项目的文件 但无法找到如何做到这一点的方法 这有效 include package pedantic analysis options yaml 这也有效 include

  • 错误：‘.’令牌之前需要有不合格的 id //（结构）

    我需要制作一个程序 从用户那里获取一小部分 然后对其进行简化 我知道如何做到这一点 并且已经完成了大部分代码 但我不断收到此错误 错误 令牌之前预期有不合格的 id 我已经声明了一个名为 ReducedForm 的结构 它包含简化的分子和分

  • Python，Matplotlib，散点图，更改单击点的颜色

    我有一个带有选择器事件的简单散点图 我想更改用鼠标单击的数据点的颜色 我的代码将改变整个数组的颜色 我怎样才能改变一个特定的点 import sys import numpy as np import matplotlib pyplot a

  • 匹配集的数据结构

    我有一个应用程序 其中有很多组 一套可能是 4 7 12 18 唯一编号且全部小于 50 然后我有几个数据项 1 1 2 4 7 8 12 18 23 29 2 3 4 6 7 15 23 34 38 3 4 7 12 18 4 1 4 7

  • 二叉搜索树验证的空间复杂度

    验证二叉树是否为 BST 的最佳算法如下 IsValidBST root infinity infinity bool IsValidBST BinaryNode node int MIN int MAX if node null retu

  • 检查包含数十万张图像的目录中损坏的文件的速度逐渐变慢

    所以我有 600 000 多张图像 我估计其中大约 5 10 已损坏 我正在生成一个日志 准确记录与该图像相关的图像 使用Python 到目前为止我的方法是这样的 def img validator source files get pat

  • Android 4.1.2 对话框被调用两次

    当我调用显示对话框时 我的应用程序遇到了这个问题 不知何故它被调用了两次 这只发生在 android 4 1 及以上版本 较低版本工作正常 所以我不认为这是任何代码问题 您以前听说过 遇到过这个问题吗 这里是代码 Button edit B

  • 使用 AVAssetReader 读取视频文件时由于内存利用率高而导致应用程序崩溃

    我正在尝试使用此问题中接受的答案中的方法来读取视频帧 使用 AVPlayer 访问单个帧 https stackoverflow com questions 39570745 accesing individual frames using

  • 从 boost::shared_ptr 转换为 std::shared_ptr？

    我有一个内部使用 Boost 版本的库shared ptr并且只暴露那些 对于我的应用程序 我想使用std shared ptr只要有可能 遗憾的是 这两种类型之间没有直接转换 因为引用计数的内容取决于实现 有什么办法可以同时拥有boost

  • 我可以在 Rails 模型中定义方法吗？

    我的 Rails 模型的代码试图define method method name 模型内部 我不断得到 NoMethodError undefined method define method 我究竟做错了什么 我这样做是不是在错误的地方

  • 找不到 web api 路由属性

    我需要在我的 Web 服务中实现一个方法 该方法可通过定义的路线使用 所以我用了Route像这样的属性 Route api New public void CreateNew int id Do stuff 但是VS2013说找不到命名空间

  • Sidekiq 服务器未加载配置文件

    我正在尝试使用 sinatra 应用程序设置 sidekiq 并且我有 使用配置文件启动 sidekiq 工作程序以在守护程序模式下运行时遇到问题 我的项目具有以下结构 project config sidekiq yml Sidekiq

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

    我有这个小提琴 我试图创建一个浮动 div 它应该从右到左切换 我对 UI 很陌生 所以我的代码有点混乱 这是我的代码和FIddle https jsfiddle net KFmLv 6752 widget toggle btn click

热门标签