如何使用jQuery创建左右滑动效果

How can I use jQuery to create a left and right sliding effect?

本文关键字：左右 何使用 jQuery 创建      更新时间：2023-09-26

我有以下jQuery代码片段:

var target1 = $('.div1');
var target2 = $('.div2');
target1.delay(1500).fadeIn();
target2.delay(3000).fadeIn();
// I want to use slide left here instead of .fadeIn()

与.fadeIn()类似，是否有幻灯片左/右选项?

我也发现了这个，但我不确定如何实现它，或者如果它是正确的。

使用您发布的链接中的代码

包含所需的库(或使用本地副本):

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="http://jquery-ui.googlecode.com/svn/tags/latest/ui/jquery.effects.core.js"></script>
<script src="http://jquery-ui.googlecode.com/svn/tags/latest/ui/jquery.effects.slide.js"></script>

添加Javascript到你的页面:

jQuery.fn.extend({
  slideRightShow: function(speed) {
    return this.each(function() {
        $(this).show('slide', {direction: 'right'}, +speed || 1000);
    });
  },
  slideLeftHide: function(speed) {
    return this.each(function() {
      $(this).hide('slide', {direction: 'left'}, +speed || 1000);
    });
  },
  slideRightHide: function(speed) {
    return this.each(function() {
      $(this).hide('slide', {direction: 'right'}, +speed || 1000);
    });
  },
  slideLeftShow: function(speed) {
    return this.each(function() {
      $(this).show('slide', {direction: 'left'}, +speed || 1000);
    });
  }
});

我甚至添加了speed参数，这样你就可以指定你想要它动画的速度。

从那以后，你可以这样写:

$("#element_id").slideRightShow();
演示:

http://jsfiddle.net/EzP2q/1/

看!这就是你需要的!

不同方向的幻灯片元素

jQuery UI有一个slide函数

查看文档

相关文章：