Expandir un input por el lado izquierdo

[mensajeescrito]

Hola amigos, a ver si me pueden echar una mano con esto:

Miren tengo un input que cuando me pongo encima de el se ensancha por el lado derecho.

Pero yo lo que necesito es que se ensanche por el lado izquierdo. es decir que aumente su width por el lado izquierdo.

¿Saben que tendria que hacerle a mi código, gracias de antemano?

Código Javascript:

$(function(){
  var search2 = $('#buscador');
  var icon2   = $('#lupa');
  
 
  $(search2).on('mouseover', function(){
    $(this).animate({
      width: '100%'
    }, 400, function(){
 
    });
    $(icon2).animate({
      right: '10px'
    }, 400, function(){
 
    });
  });
  
  
  
 
  $(search2).on('mouseout', function(){
    if(search2.val() == '') {
      $(search2).animate({
        width: '29%'
      }, 400, function(){ });
      
      $(icon2).animate({
        right: '320px'
      }, 400, function(){ });
    }
  });
  
 
  $('#formulario_buscar').submit(function(e) {
    e.preventDefault();
  });
});
 

Código HTML:

<div id="contenedor_buscador">
                              
                                          <form id="formulario_buscar" name="formulario_buscar" method="POST" action="">
                                          
                                                <div class="campo_buscador">
                                                
                                                  <input type="text" name="buscador" id="buscador" class="estilos_input_buscador" placeholder="Buscar..." tabindex="2">
                                                  <input type="submit" name="lupa" id="lupa" value="">
                                                  
                                                </div>
                                            
                                          </form>
                              
                                    </div>
 

[Alexis88]

Los elementos no pueden "crecer" ni "achicarse" desde la izquierda hacia el centro, sino al revés.

Lo que podrías hacer es que por cada cantidad X de píxeles que crezca, centres al elemento, de tal modo que parecerá que crece hacia la izquierda.

Saludos

[pzin]

O lo alineas a la derecha, como texto, flotándolo, posición absoluta o como quieras.

[mensajeescrito]

Bueno he encontrado una solucion por internet pero no entiendo por que en la web donde lo he encontrado funciona y cuando utilizo el codigo yo no funciona ¿?

Código CSS:

.pollSlider{
    position:fixed;
    height:100%;
    background:red;
    width:200px;
    right:0px;
    margin-right: -200px;
}
#pollSlider-button{
    position:fixed;
    width:100px;
    height:50px;
    right:0px;
    background:green;
    top:300px;
}
 

Código Javascript:

$(document).ready(function()
{
  $('#pollSlider-button').click(function() {
    if($(this).css("margin-right") == "200px")
    {
        $('.pollSlider').animate({"margin-right": '-=200'});
        $('#pollSlider-button').animate({"margin-right": '-=200'});
    }
    else
    {
        $('.pollSlider').animate({"margin-right": '+=200'});
        $('#pollSlider-button').animate({"margin-right": '+=200'});
    }
 
 
  });
 });
 

<script src="js/jquery.min.js"></script>

Código HTML:

<div class="pollSlider"></div>
<div id="pollSlider-button"></div>
 

Este es el enlace donde esta:

http://jsfiddle.net/XNnHC/942/

[iblancasa]

Puede que en la otra web no estés copiando el código completo o algo esté chocando con lo que ya tienes en tu web.

[mensajeescrito]

Pues esa es la historia , que el codigo es este ni mas ni menos y lo he puesto en un documento en blanco , para que no chocase con nada y no funciona .

Por eso no entiendo que pasa ¿?