jQuery：向左滑动并向右滑动

问题描述：

我在jQuery中看到过slideUp和slideDown。左右滑动的功能/方式如何？jQuery：向左滑动并向右滑动

您可以简单地做一个'animate（{width：0}）'，然后将它设置为向右或向左，让它看起来像向右或向左滑动。 – 2010-03-09 18:13:55

答

您可以在jQuery UI的附加效果做到这一点：See here for details

简单的例子：

$(this).hide("slide", { direction: "left" }, 1000); 
$(this).show("slide", { direction: "left" }, 1000);

这似乎是依赖于**效果核心**，是不是有办法实现这个没有任何外部的东西？ – Sarfraz 2010-03-09 18:07:33

@Sarfraz - 不是我所知道的，那么你就是在重新发明*......一个音符可能会有帮助，保持方向与隐藏/显示相同，这是它来自或去的方向......它是相反的，它是相同的，但你已经习惯了它。 – 2010-03-09 18:08:32

@Sarfraz - 如果你愿意，你可以尝试和拉动你需要的部分，尽管如此，如果你沿着这条路线前进，请从这里开始：http：//code.google.com/p/jquery-ui/source /browse/branches/dev/effects/ui/effects.slide.js?r=2454 – 2010-03-09 18:10:49

答

如果你不想要的东西臃肿像jQuery UI，尽我的自定义动画：https://github.com/yckart/jquery-custom-animations

对你而言，blindLeftToggle和blindRightToggle是合适的选择。

http://jsfiddle.net/ARTsinn/65QsU/

感谢这些令人敬畏的功能..我一直在寻找像这样容易的事情。它就像一个魅力。 – 2013-09-16 14:48:44

当我想这样做，控制台说我 '未捕获TypeError：对象[对象对象]没有方法'blindLeftToggle'' – 2014-02-20 16:06:36

这不适用于我，没有任何反应。 – 2014-11-15 06:21:57

答

你可以随时使用jQuery添加一个类，.addClass或.toggleClass。然后，您可以将所有样式保留在CSS中并排除脚本。

http://jsfiddle.net/B8L3x/1/

答

此代码工作得很好。 $（文件）。就绪（函数（）{VAR 选项= {}; $（ “＃C”）隐藏（）;（ $（“＃c”）。toggle（“slide”，options，500）; （“＃b”）。hide（）; }）; $（“＃b”）。click（funct ion（）{（“＃d”）。toggle（“slide”，options，500）; $（“＃c”）。隐藏（）; }）; }）; nav { float：left; max-width：300px; width：300px; margin-top：100px; } article { margin-top：100px; height：100px; } ＃c，＃d { padding：10px; 边框：1px坚实的橄榄; margin-left：100px; margin-top：100px; background-color：blue;按钮{ }边框：2px纯蓝色; background-color：white; 颜色：黑色; padding：10px; } 喜寄存器1

寄存器2

<article id="c"> 
     <form> 
      <label>User name:</label> 
      <input type="text" name="123" value="something"/> 
      <br> 
      <br> 
      <label>Password:</label> 
      <input type="text" name="456" value="something"/> 
     </form> 
    </article> 
    <article id="d"> 
     <p>Hi</p> 
    </article> 
</body>

参考erence：W3schools.com和jqueryui.com

注意：这是一个示例代码不要忘记添加所有脚本标记以实现代码的正常运行。

jQuery：向左滑动并向右滑动

相关推荐