jQuery deslize para a esquerda e mostrar

Question

Eu estendi os efeitos jQuery chamados slideRightShow() e slideLeftHide() com algumas funções que funcionam de forma semelhante aos slideUp() e slideDown() como pode ser visto abaixo. No entanto, eu também gostaria de implementar slideLeftShow() e slideRightHide().

Eu sei que existem bibliotecas substanciais que oferecem este tipo de coisa (eu gostaria de evitar a adição de outro grande conjunto de arquivos javascript), mas alguém pode fornecer um exemplo simples de como implementar qualquer 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 função slideRightShow acima começa a mostrar a imagem do lado esquerdo e avança para o lado direito. Eu estou procurando alguma maneira de fazer a mesma coisa, mas começar a partir do lado direito e progredir para a esquerda . Obrigado!

Editar

jQuery interface tem algo como eu preciso (eu basicamente precisa de seu "slide na direita" e "slide out esquerda" funções), mas eu não poderia chegar a este trabalho com jQuery 1.3: http://interface.eyecon.ro/demos/ifx.html . Além disso, sua demo parece quebrado, assim como ele só vai fazer um slide uma vez antes de jogar um milhão de erros.

Answer 1

Este recurso é incluído como parte do jQuery UI http://docs.jquery.com/UI / Efeitos / slide se você quer estendê-lo com seus próprios nomes você pode usar este.

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ê vai precisar dos 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>

Answer 2

Não se esqueça do preenchimento e 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 as / argumentos de chamada de retorno de velocidade acrescentou, é um drop-in completo substituto para slideUp() e slideDown().

Answer 3

Você pode adicionar nova função para a biblioteca jQuery adicionando essa linha em seu próprio arquivo de script e você pode facilmente usar fadeSlideRight() e fadeSlideLeft().

Nota:. Você pode alterar a largura da animação como você como 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);
    });
}

Answer 4

E se você quiser variar a velocidade e incluem retornos de chamada simplesmente adicioná-los como este:

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