Problema con animate()

iEnrique · #1 (**permalink**) 12/08/2013, 13:21

No digo nada porque no sé que decir, no me funciona y no encuentro el error, creo que todo está bien...

Código HTML:

Ver original<!DOCTYPE html>
<html>
<head>
    <title>Prueba</title>
    <meta charset="utf-8">
    <script type="text/javascript" src="jquery-1.10.2.min.js"></script>
    <script>
        $(document).ready(function(){
            $('#mover').click(function(){
                $('.menu').animate({ right: += 10 });
            });
        });
    </script>
</head>
<body>
    <div style="position:relative;margin:0 auto;width:800px;">
    <button id="mover">Mover</button>
    <div class="menu" style="float:right;background-color:grey;height:500px;width:100px;margin-right:10px;">
    </div>
    </div>
</body>
</html>

AbellSkyoneXD · #2 (**permalink**) 12/08/2013, 13:45

no sera animate({right: =>10})

iEnrique · #3 (**permalink**) 13/08/2013, 03:45

Cita:

Iniciado por AbellSkyoneXD

no sera animate({right: =>10})

Sigue sin irme...

pzin · #4 (**permalink**) 13/08/2013, 03:47

right sólo funciona en elementos cuya posición no sea estática.

iEnrique · #5 (**permalink**) 13/08/2013, 06:10

Lo tengo así y sigue sin irme...

Código HTML:

Ver original<!DOCTYPE html>
<html>
<head>
    <title>Prueba</title>
    <meta charset="utf-8">
    <script type="text/javascript" src="jquery-1.10.2.min.js"></script>
    <script>
        $(document).ready(function(){
            $('#mover').click(function(){
                $('.menu').animate({ left: += 10 });
            });
        });
    </script>
</head>
<body>
    <div style="position:relative;margin:0 auto;width:800px;">
    <button id="mover">Mover</button>
    <div class="menu" style="background-color:grey;height:500px;width:100px;position:relative;">
    </div>
    </div>
</body>
</html>

pzin · #6 (**permalink**) 13/08/2013, 06:51

Es que += 10 no es un valor válido.

Si quieres moverlo según en la posición que esté:

Código javascript:

Ver original$('#mover').click(function(){
  var mover = parseFloat($('.menu').css('left')) + 10
  $('.menu').animate({ left: mover });
});

Además le indicas un valor left: 0 al elemento como inicial.

iEnrique · #7 (**permalink**) 13/08/2013, 14:19

Lo tengo así y no me funciona :$ ¿Qué es verdaderamente lo que haga mal?

Código HTML:

Ver original<!DOCTYPE html>
<html>
<head>
    <title>Prueba</title>
    <meta charset="utf-8">
    <script type="text/javascript" src="jquery-1.10.2.min.js"></script>
    <script>
        $(document).ready(function(){
            $('#mover').click(function(){
                var mover = parseFloat($('.menu').css('left')) + 10;
                $('.menu').animate({ left: mover });
            });
        });
    </script>
</head>
<body>
    <div style="position:relative;margin:0 auto;width:800px;">
    <button id="mover">Mover</button>
    <div class="menu" style="background-color:grey;height:500px;width:100px;position:relative;">
    </div>
    </div>
</body>
</html>

pzin · #8 (**permalink**) 13/08/2013, 15:10

Cita:

Iniciado por iEnrique

Lo tengo así y no me funciona :$ ¿Qué es verdaderamente lo que haga mal?

Cita:

Iniciado por pzin

Además le indicas un valor left: 0 al elemento como inicial.

iEnrique · #9 (**permalink**) 14/08/2013, 06:01

¡Muchas gracias Pzin y a los que habéis intentado ayudarme! :)