blocks|key|353591|text|这个特性包含在jquery+ui+http://docs.jquery.com/UI/Effects/Slide中，如果你想用你自己的名字来扩展它，你可以使用这个。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|353592|jQuery.fn.extend({
++slideRightShow:+function()+{
++++return+this.each(function()+{
++++++++$(this).show('slide',+{direction:+'right'},+1000);
++++});
++},
++slideLeftHide:+function()+{
++++return+this.each(function()+{
++++++$(this).hide('slide',+{direction:+'left'},+1000);
++++});
++},
++slideRightHide:+function()+{
++++return+this.each(function()+{
++++++$(this).hide('slide',+{direction:+'right'},+1000);
++++});
++},
++slideLeftShow:+function()+{
++++return+this.each(function()+{
++++++$(this).show('slide',+{direction:+'left'},+1000);
++++});
++}
});|code-block|syntax|javascript|353593|您将需要以下参考资料|353594|<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>|353595|entityMap|0|LINK|mutability|MUTABLE|url|http://docs.jquery.com/UI/Effects/Slide^0|H|13|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@$A|V|B|W|1|X]]|C|$]]|$1|D|3|E|5|F|7|Y|8|@]|9|@]|C|$G|H]]|$1|I|3|J|5|6|7|Z|8|@]|9|@]|C|$]]|$1|K|3|L|5|F|7|10|8|@]|9|@]|C|$G|H]]|$1|M|3|-4|5|6|7|11|8|@]|9|@]|C|$]]]|N|$O|$5|P|Q|R|C|$S|T]]]]

<p>This feature is included as part of jquery ui <a href="http://docs.jquery.com/UI/Effects/Slide" rel="noreferrer">http://docs.jquery.com/UI/Effects/Slide</a> if you want to extend it with your own names you can use this.</p>

<pre><code>jQuery.fn.extend({
  slideRightShow: function() {
    return this.each(function() {
        $(this).show('slide', {direction: 'right'}, 1000);
    });
  },
  slideLeftHide: function() {
    return this.each(function() {
      $(this).hide('slide', {direction: 'left'}, 1000);
    });
  },
  slideRightHide: function() {
    return this.each(function() {
      $(this).hide('slide', {direction: 'right'}, 1000);
    });
  },
  slideLeftShow: function() {
    return this.each(function() {
      $(this).show('slide', {direction: 'left'}, 1000);
    });
  }
});
</code></pre>

<p>you will need the following references</p>

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


blocks|key|348641|text|别忘了填充和边距...|type|unstyled|depth|inlineStyleRanges|entityRanges|data|348642|jQuery.fn.slideLeftHide+=+function(speed,+callback)+{+
++this.animate({+
++++width:+"hide",+
++++paddingLeft:+"hide",+
++++paddingRight:+"hide",+
++++marginLeft:+"hide",+
++++marginRight:+"hide"+
++},+speed,+callback);
}

jQuery.fn.slideLeftShow+=+function(speed,+callback)+{+
++this.animate({+
++++width:+"show",+
++++paddingLeft:+"show",+
++++paddingRight:+"show",+
++++marginLeft:+"show",+
++++marginRight:+"show"+
++},+speed,+callback);
}|code-block|syntax|javascript|348643|添加了速度/回调参数后，它完全可以替代slideUp()和slideDown()。|offset|length|style|CODE|348644|entityMap^0|0|0|J|9|T|B|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@$I|R|J|S|K|L]|$I|T|J|U|K|L]]|9|@]|A|$]]|$1|M|3|-4|5|6|7|V|8|@]|9|@]|A|$]]]|N|$]]

<p>Don't forget the padding and margins...</p>

<pre><code>jQuery.fn.slideLeftHide = function(speed, callback) { 
  this.animate({ 
    width: "hide", 
    paddingLeft: "hide", 
    paddingRight: "hide", 
    marginLeft: "hide", 
    marginRight: "hide" 
  }, speed, callback);
}

jQuery.fn.slideLeftShow = function(speed, callback) { 
  this.animate({ 
    width: "show", 
    paddingLeft: "show", 
    paddingRight: "show", 
    marginLeft: "show", 
    marginRight: "show" 
  }, speed, callback);
}
</code></pre>

<p>With the speed/callback arguments added, it's a complete drop-in replacement for <code>slideUp()</code> and <code>slideDown()</code>.</p>


blocks|key|350957|text|通过在自己脚本文件中添加这些行，可以将新函数添加到jQuery库中，而且可以轻松地使用fadeSlideRight()和fadeSlideLeft()。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|350958|注意:你可以根据你的喜好改变750px实例的动画宽度。|350959|$.fn.fadeSlideRight+=+function(speed,fn)+{
++++return+$(this).animate({
++++++++'opacity'+:+1,
++++++++'width'+:+'750px'
++++},speed+%7C%7C+400,+function()+{
++++++++$.isFunction(fn)+&&+fn.call(this);
++++});
}

$.fn.fadeSlideLeft+=+function(speed,fn)+{
++++return+$(this).animate({
++++++++'opacity'+:+0,
++++++++'width'+:+'0px'
++++},speed+%7C%7C+400,function()+{
++++++++$.isFunction(fn)+&&+fn.call(this);
++++});
}|code-block|syntax|javascript|350960|entityMap^0|17|G|1O|F|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@$9|P|A|Q|B|C]|$9|R|A|S|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|T|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|U|8|@]|D|@]|E|$K|L]]|$1|M|3|-4|5|6|7|V|8|@]|D|@]|E|$]]]|N|$]]

<p>You can add new function to your jQuery library by adding these line on your own script file and you can easily use <code>fadeSlideRight()</code> and <code>fadeSlideLeft()</code>.</p>

<p>Note: you can change width of animation as you like instance of 750px.</p>

<pre><code>$.fn.fadeSlideRight = function(speed,fn) {
    return $(this).animate({
        'opacity' : 1,
        'width' : '750px'
    },speed || 400, function() {
        $.isFunction(fn) &amp;&amp; fn.call(this);
    });
}

$.fn.fadeSlideLeft = function(speed,fn) {
    return $(this).animate({
        'opacity' : 0,
        'width' : '0px'
    },speed || 400,function() {
        $.isFunction(fn) &amp;&amp; fn.call(this);
    });
}
</code></pre>


blocks|key|3129923|text|如果您想改变速度并包含回调，只需像这样添加它们：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3129924|++++++++jQuery.fn.extend({
++++++++++++slideRightShow:+function(speed,callback)+{
++++++++++++++++return+this.each(function()+{
++++++++++++++++++++$(this).show('slide',+{direction:+'right'},+speed,+callback);
++++++++++++++++});
++++++++++++},
++++++++++++slideLeftHide:+function(speed,callback)+{
++++++++++++++++return+this.each(function()+{
++++++++++++++++++++$(this).hide('slide',+{direction:+'left'},+speed,+callback);
++++++++++++++++});
++++++++++++},
++++++++++++slideRightHide:+function(speed,callback)+{
++++++++++++++++return+this.each(function()+{++
++++++++++++++++++++$(this).hide('slide',+{direction:+'right'},+speed,+callback);
++++++++++++++++});
++++++++++++},
++++++++++++slideLeftShow:+function(speed,callback)+{
++++++++++++++++return+this.each(function()+{
++++++++++++++++++++$(this).show('slide',+{direction:+'left'},+speed,+callback);
++++++++++++++++});
++++++++++++}
++++++++});|code-block|syntax|javascript|3129925|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>And if you want to vary the speed and include callbacks simply add them like this :</p>

<pre><code>        jQuery.fn.extend({
            slideRightShow: function(speed,callback) {
                return this.each(function() {
                    $(this).show('slide', {direction: 'right'}, speed, callback);
                });
            },
            slideLeftHide: function(speed,callback) {
                return this.each(function() {
                    $(this).hide('slide', {direction: 'left'}, speed, callback);
                });
            },
            slideRightHide: function(speed,callback) {
                return this.each(function() {  
                    $(this).hide('slide', {direction: 'right'}, speed, callback);
                });
            },
            slideLeftShow: function(speed,callback) {
                return this.each(function() {
                    $(this).show('slide', {direction: 'left'}, speed, callback);
                });
            }
        });
</code></pre>


<p>I extended the <code>jQuery</code> effects called <code>slideRightShow()</code> and <code>slideLeftHide()</code> with a couple functions that work similarly to <code>slideUp()</code> and <code>slideDown()</code> as seen below.  However, I would also like to implement <code>slideLeftShow()</code> and <code>slideRightHide()</code>.  </p>

<p>I know there are substantial libraries that offer this type of thing (I'd like to avoid adding another large set of <code>javascript</code> files), but can anyone provide a simple example of how to implement either <code>slideLeftShow()</code> or <code>slideRightHide()</code>?</p>

<pre><code>jQuery.fn.extend({
  slideRightShow: function() {
    return this.each(function() {
      jQuery(this).animate({width: 'show'});
    });
  },
  slideLeftHide: function() {
    return this.each(function() {
      jQuery(this).animate({width: 'hide'});
    });
  },
  slideRightHide: function() {
    return this.each(function() {
      ???
    });
  },
  slideLeftShow: function() {
    return this.each(function() {
      ???
    });
  }
});
</code></pre>

<p>The above <code>slideRightShow</code> function starts showing the image from the left side and it progresses toward the right side.  <strong><em>I am looking for some way to do the same thing but start from the right side and progress toward the left</em></strong>.  Thanks!</p>

<p>EDIT</p>

<p>jQuery Interface has something like I need (I basically need their "slide in right" and "slide out left" functions), but I couldn't get this to work with jQuery 1.3: <a href="http://interface.eyecon.ro/demos/ifx.html" rel="noreferrer">http://interface.eyecon.ro/demos/ifx.html</a> .  Also, their demo seems to broken as well as it will only do a slide once before throwing a million errors.</p>


jQuery slide left and show

我扩展了名为slideRightShow()和slideLeftHide()的jQuery效果，添加了两个类似于slideUp()和slideDown()的函数，如下所示。然而，我也想实现slideLeftShow()和slideRightHide()。我知道有大量的库提供了这种类型的东西(我想避免添加另一个大型的ja...

问jQuery向左滑动并显示
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问jQuery向左滑动并显示EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问jQuery向左滑动并显示
EN