表单不会提交上移

我试图将表单向上移动几个像素，这不起作用。我不知道为什么。表单不会提交上移

当我提交（我已经用alert（）测试过）时，函数被调用，但是css部分不起作用。

这是代码：

<!DOCTYPE>  
<html> 

<head> 
    <title> Pagina de Luis </title> 
    <meta http-equiv="content-type" content="text/html;charset=UTF-8"> 
    <link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro' rel='stylesheet' type='text/css'> 
    <link href='http://fonts.googleapis.com/css?family=Londrina+Solid' rel='stylesheet' type='text/css'> 
    <link href='http://fonts.googleapis.com/css?family=Special+Elite' rel='stylesheet' type='text/css'> 


    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> 
    <script> 
     $(document).ready(function() { 
      $("#formulario").submit(function (event) { 
       $(this).css({ 
        top: -50 px; 
       }); 

      }); 

     }); 
    </script> 

    <style type="text/css"> 
     body, 
     p { 
      font-family: 'Source Sans Pro'; 
      font-size: 30px; 
      line-height: 15px; 
      letter-spacing: 0px; 
      font-weight: bold; 
     } 

     #container { 
      width: 100%; 
      height: 100%; 
      margin: 0px; 
      padding: 0px; 
     } 

     #contenido { 
      width: 50%; 
      min-width: 300px; 
      margin-left: 60px; 
      letter-spacing: -1px; 
      padding: 20px 0 0px 0; 
     } 

     #texto { 
      padding: 20px; 
      margin-top: 30px; 
     } 

     #texto p { 
      margin: 0px; 
      padding-bottom: 20px; 
     } 

     #nombre { 
      font-family: 'Special Elite'; 
      font-size: 30px; 
      padding-top: 15px; 
      border: 0px; 
     } 

     #imagen { 
      vertical-align: text-top; 
      width: 50%; 
      float: right; 
     } 

     input:focus { 
      outline: 0 !important; 
     } 
    </style> 

</head> 

<body> 
    <div id="container"> 
     <div id="contenido"> 
      <form method="POST" id="formulario"> 
       <div id="texto"> 
        <p>Hola, soy Luis.</p> 
        <p>Bienvenido a mi web personal.</p> 
        <p>Antes de nada,</p> 
        <p>&iquest;podr&iacute;as indicarme tu nombre?</p> 
        <input type="text" id="nombre" autofocus autocomplete="off" /> 
       </div> 
      </form> 
     </div> 
    </div> 
</body>

代码真人版：

http://www.luisalmerich.com/

来源

2015-05-24 anonymous

当表单提交时，页面重新加载，并且所有用javascript所做的更改都会丢失？ – adeneo

您正在使用的CSS top没有任何position性能。尝试使用位置absolute或relative

$(document).ready(function() { 
      $("#formulario").submit(function (event) { 
       $(this).css({ 
        top: '-50px', 
        position: 'relative' 
       }); 
      }); 
     });

如果你不希望改变position属性，您可以修改margin-top财产一样

$(document).ready(function() { 
       $("#formulario").submit(function (event) { 
        $(this).css({ 
         marginTop: '-50px' 
        }); 
       }); 
      });

最后，需要注意的是，当一个表单提交，页面重新加载所以你很可能只会暂时看到这种变化。如果您return false，页面将不会加载（虽然这可能不是你想要的）

$(document).ready(function() { 
        $("#formulario").submit(function (event) { 
         $(this).css({ 
          marginTop: '-50px' 
         }); 
         return false; 
        }); 
       });

来源

2015-05-24 14:33:33 AmmarCSE

非常感谢，这件作品非常出色。是否有任何理由为什么你的第一个片段不能用animate（）代替css（）; – anonymous

@anonymous，它应该与动画。你尝试过了吗？它失败了？ – AmmarCSE

你可以尝试添加position: relative;也

 $("#formulario").submit(function (event) { 
      $(this).css({ 
       position: "relative", 
       top: "-50px" 
      }); 

     });

来源

2015-05-24 14:40:51

如果你想让它与.animate工作（）试试这个：

$(document).ready(function() { 
    $("#formulario").submit(function (event) { 
     event.preventDefault(); 
     $(this).css('position', 'relative') 
      .animate({top: '-50px'}, 5000, function() { 
       // Animation complete. 
      }) 
    }); 
});

来源

2015-05-24 16:27:56 kizisoft

表单不会提交上移

回答

相关问题