como hacer slide a la derecha o izquierda

[rikimm]

hola buenas noches como la pregunta dice como le puedo hacer que se haga un slide a la derecha o izq. en jquery

[Trublux]

Empieza buscando en la documentación:
http://api.jquery.com/animate/

[rikimm]

osea q no es con la propiedad slide

[Trublux]

Pensaba que decías slide en "generico", no que quisieses usar ese efecto, bueno los efectos se llaman slideUp y slideDown; y slideToggle que las alterna.
De todas formas, si tuvieses un problema más concreto sería más fácil ayudar.
Deberías especificar si quieres mover un div, una imagen, o qué exactamente (si puedes poner el html en concreto, mejor).

[rikimm]

es que tengo un diseño de un boton que a la hora que le dan click un div hace un slide hacia abajo para mostrar el contenido pero tambien quiero hacer que ese boton se alarge haciendo el efecto de un slidedown pero en ves de que sea slideDown quisiera que fuera slideRight

Código HTML:

<div id="bot" ><a href="#" id="pen"><span id="text2">Pensión</span></a></div>
        <article id="pencion">
            <article id="cont">
                  <h2>Pensión</h2>
                              <article id="text">
                                      
                                  contenido.....
 
 
 
                 </article>
            </article>
        </article>
 

[Trublux]

No es exactamente lo mismo pero hace poco salió un tema que puede que te sirva de ejemplo:
http://www.forosdelweb.com/f13/mover...jquery-953308/

Modificándolo un poco para que se adapte a tu html.

Código CSS:

#text{display:none; margin-left:-100px}
 

Código Javascript:

$(function(){
    $('#pen').click(function() {
        $('#text').animate( {marginLeft:0,opacity:"show"}, 2000, "linear" );
    });
});
 

Esto haría que la capa "#text" se mostrase de izquierda a derecha y pasando de transparente a opaco (es mejor que lo pruebes y veas el resultado).

[rikimm]

mmm me manda unos errores lo que pasa es que estoy ocupando jquery y lo estoy dejando asi

Código JQuery:

$(document).ready(
    function()
    {
        $("#pen").click(text)
    }
);
 
function text()
{
    $("#text").animate({marginLeft:0,opacity:"show"},2000,"linear")};
}
 

en la funcion text es donde me manda el error

[Trublux]

Prueba así:

Código Javascript:

$(function(){
    $("#pen").click( text );
});
function text(){
    $("#text").animate({marginLeft:0,opacity:"show"},2000,"linear");
}
 

P.D.: $(function(){/******/ }) es lo mismo que $(document).ready( /******/ );

[rikimm]

Trublux ya pude hacer que se alarge como le puedo hacer para que si le vuelven a dar click se regrese seria como el slidetoogle te pongo el codigo de como lo deje para que se alargara:

Código jquey:

function text()
{
    
    
    $("#bot").animate({width:"100%"},1000)
    
}
 

[Trublux]

Entonces sería algo así:

Código CSS:

#text{display:none; margin-left:-100px}
 

Código Javascript:

var mostrar = function(){
    $("#text").animate({marginLeft:0,opacity:"show"},1000,"linear");
}
var ocultar = function(){
    $("#text").animate({marginLeft:"-100px",opacity:"hide"},1000,"linear");
}
 
$(function(){
    $( '#text2' ).toggle(
        function(){
            mostrar();
        }, function(){
            ocultar();
        }
    );
});
 

O podrías poner esto:

Código CSS:

#text{width:0px; overflow:hidden}
 

Código Javascript:

var mostrar = function(){
    $("#text").animate({width:"100%"},1000,"linear");
}
var ocultar = function(){
    $("#text").animate({width:"0"},1000,"linear");
}
 
$(function(){
    $( '#text2' ).toggle(
        function(){
            mostrar();
        }, function(){
            ocultar();
        }
    );
});
 

Le he puesto que tarde menos tiempo (antes estaba en 2 segundos, ahora está en 1 segundo)