jQuery deslize para a esquerda e mostre

Eu estendi os jQueryefeitos chamados slideRightShow()e slideLeftHide()com algumas funções que funcionam de forma semelhante slideUp()e slideDown()conforme mostrado abaixo. No entanto, eu também gostaria de implementar slideLeftShow()e slideRightHide().

Eu sei que existem bibliotecas substanciais que oferecem esse tipo de coisa (eu gostaria de evitar adicionar outro grande conjunto de javascriptarquivos), mas alguém pode fornecer um exemplo simples de como implementar slideLeftShow()ou 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() {
      ???
    });
  }
});

A slideRightShowfunção acima começa mostrando a imagem do lado esquerdo e avança para o lado direito. Estou procurando uma maneira de fazer a mesma coisa, mas comece do lado direito e prossiga para a esquerda . Obrigado!

EDITAR

A interface jQuery tem algo parecido com o que eu preciso (basicamente preciso das funções "slide in right" e "slide out left"), mas não consegui fazer isso funcionar com o jQuery 1.3: http://interface.eyecon.ro/demos /ifx.html . Além disso, seu demo parece estar quebrado, pois só fará um slide uma vez antes de gerar um milhão de erros.

Este recurso está incluído como parte do jquery ui http://docs.jquery.com/UI/Effects/Slide, se você quiser estendê-lo com seus próprios nomes, pode usá-lo.

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

você precisará das seguintes referências

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

Não se esqueça do preenchimento e das margens ...

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

Com os argumentos de velocidade / retorno de chamada adicionados, é um substituto completo para slideUp()e slideDown().

Você pode adicionar uma nova função à sua biblioteca jQuery adicionando essas linhas em seu próprio arquivo de script e pode usar facilmente fadeSlideRight()e fadeSlideLeft().

Nota: você pode alterar a largura da animação conforme desejar a instância de 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);
    });
}

E se você quiser variar a velocidade e incluir retornos de chamada, basta adicioná-los assim:

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