jQuery的向左滑動並顯示

107

我延長了jQuery效應稱爲slideRightShow()和slideLeftHide()有如下看出，類似的工作slideUp()和slideDown()一對夫婦的功能。但是，我也想實施slideLeftShow()和slideRightHide()。jQuery的向左滑動並顯示

我知道有提供這種類型的事情大量的庫（我想避免添加另一大集javascript文件），但任何人都可以提供如何實現一個簡單的例子，無論是slideLeftShow()或slideRightHide()？

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() { 
     ??? 
    }); 
    } 
});

上面slideRightShow功能開始示出了從左側的圖像，並將其向右側進行。 我正在尋找一些方法來做同樣的事情，但從右側開始，向左側進展。謝謝！

編輯

jQuery的接口有類似的東西，我需要（我基本上都需要自己的「滑右」和「滑出左」的功能），但我不能得到這個用jQuery 1.3工作：http://interface.eyecon.ro/demos/ifx.html。此外，他們的演示似乎也被打破，並且在拋出一百萬個錯誤之前它只會做一次幻燈片。

來源

2009-02-06 Wickethewok

我更新了我的職位，我希望這有助於 – bendewey 2009-02-06 22:48:04

相關：http://stackoverflow.com/questions/596608/slide-right-to-left – 2014-02-24 15:04:19

184

如果您想用自己的名字擴展它，可以使用此功能作爲jquery UI http://docs.jquery.com/UI/Effects/Slide的一部分。

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); 
    }); 
    } 
});

，你將需要以下引用

<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>

來源

2009-02-06 18:10:43 bendewey

嗨！我正在尋找你在那裏實施的反面。基本上，當我使用我上面顯示的元素時，左邊的部分先出現並向右進展。我試圖讓它從右側開始並向左側前進。 – Wickethewok 2009-02-06 18:30:03

它的作品，如果你漂浮的權利。除此以外。您可能需要爲左側的屬性註冊並在縮小元素時移動元素。 – bendewey 2009-02-06 18:56:29

將元素更改爲浮動「右」並未爲我反轉幻燈片。我在上面澄清，如果這有幫助。 – Wickethewok 2009-02-06 21:14:54

不要忘了填充和利潤...

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); 
}

隨着投入速度/回調參數，它是一個完整的下降 - 取代slideUp()和slideDown()。

來源

2009-09-29 13:50:03 vdboor

通過將這些行添加到您自己的腳本文件中，您可以將新功能添加到jQuery庫中，並且您可以輕鬆使用fadeSlideRight()和fadeSlideLeft()。

注意：如果您喜歡750px的實例，您可以更改動畫的寬度。

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

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

來源

2012-07-10 07:27:12 thebhatta

如果你想改變速度和包括回調只需添加它們是這樣的：

 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); 
       }); 
      } 
     });

來源

2013-01-31 00:18:45

jQuery的向左滑動並顯示

回答

相關問題