jQuery deslize para a esquerda e mostre


111

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.


Eu atualizei minha postagem e espero que isso ajude
bendewey

Respostas:


185

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>

Oi! Estou procurando o inverso do que você implementou lá. Basicamente, quando uso o que tenho acima para mostrar um elemento, a parte esquerda aparece primeiro e avança para a direita. Estou tentando fazer com que comece do lado direito e progrida para a esquerda.
Wickethewok

1
funciona se você flutuar o elemento certo. De outra forma. você pode desejar animar a propriedade à esquerda e mover o elemento conforme você o encolhe.
bendewey

1
Alterar o elemento para flutuar "à direita" não reverteu o slide para mim. Esclareci acima se isso ajuda.
Wickethewok

2
Muito obrigado! Eu não sabia que isso fazia parte dos efeitos do jQuery. Eu daria +2 se pudesse!
Wickethewok


34

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


Como fazer com que eles tenham o mesmo efeito com o deslizamento para a direita?
Jayant Varshney

@JayantVarshney: certifique-se de que o bloco esteja alinhado à direita, possivelmente com algum bloco interno. Este código apenas diminui a largura. Se seu CSS pode lidar com isso, você terá um slide certo
vdboor

Obrigado ... Mas eu quero os dois efeitos na mesma div .. como abrir da direita para a esquerda e depois fechar da esquerda para a direita ou vice-versa ...
Jayant Varshney

Bem, então, que tal trocar de classe no retorno de chamada de conclusão? :-)
vdboor

Obrigado, usei animações CSS3 para conseguir essa funcionalidade
Jayant Varshney

9

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

1
Isso é exatamente o que eu precisava sem incluir o jQuery UI. Basta adicionar a opacidade e a largura como parâmetros. ... = function(opacity, speed, width, fn) {...}
Dylan Valade

1
Esta é de longe a melhor solução. Não há necessidade de adicionar mais bibliotecas. Obrigado.
hosseio

5

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);
                });
            }
        });
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.