jQuery слайд вліво та показуй

Я розширив jQueryвикликані ефекти slideRightShow()і slideLeftHide()на пару функцій, які працюють аналогічно slideUp()та slideDown()як показано нижче. Однак я також хотів би реалізувати slideLeftShow()іslideRightHide() .

Я знаю , що є істотні бібліотеки , які пропонують такого роду речі (я хотів би, щоб уникнути додавання ще один великий набір 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функція починає показувати зображення з лівого боку і рухається в бік правого боку. Я шукаю якийсь спосіб зробити те ж саме, але почніть з правого боку і рухайтеся вліво . Дякую!

EDIT

Інтерфейс jQuery має щось подібне, що мені потрібно (мені в основному потрібні їх функції "слайд вправо" і "висунути зліва"), але я не зміг змусити це працювати з jQuery 1.3: http://interface.eyecon.ro/demos /ifx.html . Крім того, їх демонстрація, здається, зламана, тому що вона зробить слайд лише один раз, перш ніж викинути мільйон помилок.

Ця функція включена як частина 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>

Не забувайте прокладки та запаси ...

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().

Ви можете додати нову функцію до своєї бібліотеки 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);
    });
}

А якщо ви хочете змінити швидкість і включити зворотні дзвінки, просто додайте їх так:

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