Php 表单提交前的jQuery动画不起作用
当我尝试将jQueryPhp 表单提交前的jQuery动画不起作用,php,jquery,forms,jquery-animate,Php,Jquery,Forms,Jquery Animate,当我尝试将jQuery单击动画添加到我的提交按钮时，它会启动动画，但是会很快重置，因为表单会提交并刷新页面。如果表单由div包装，则动画工作正常，但在动画完成后表单不会提交。如何让它在动画完成后提交表单，并在表单提交后防止动画重置。我不熟悉PHP和jQuery，不知道如何做。以下是我到目前为止的情况： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <
单击div<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test</title>
<style type="text/css">
body
{
background-color: lightgrey;
height: 100%;
width: 100%;
overflow: hidden;
}
.PSolCanvas
{
transform: translate(-50%, -40%);
z-index: 1;
position: absolute;
left: 50%;
top: 88.5%;
background-color: transparent;
min-height: 100%;
}
.PSol
{
width: 120px;
height: 120px;
margin: 0 auto;
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
border-radius: 100%;
font: 15px arial;
color: black;
border: 1px solid lightgray;
background: #20AC20;
}
</style>
<script rel = "javascript" type = "text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script type='text/javascript'>
$(document).ready(function(){
$(".PSol").click(function() {
$(".PSolCanvas, .TSolCanvas").animate({top: "50%"});
});
});
</script>
</head>
<body>
<?php
$username = "username";
$password = "password";
$host = "host";
$db = $username;
if(isset($_POST['PSol']))
{
$connection = mysqli_connect($host, $username, $password, $db);
$sql = "UPDATE table SET column='' WHERE id = 1";
if (mysqli_query($connection, $sql)) {
echo "Record successfully changed.";
}
else{
echo "Error: " . $sql . "<br>" . mysqli_error($connection);
}
mysqli_close($connection);
echo "<p>Disconnected from server: ".$host."</p>";
}
?>
<form action="<?php echo $_SERVER['PHP_SELF']; ?>" method = "post" class = "PSolCanvas">
<input type = "submit" name = "PSol" class = "PSol" value = "P"/>
</form>
</body>
</html>
试验
身体
{
背景颜色：浅灰色；
身高：100%；
宽度：100%；
溢出：隐藏；
}
普索卡瓦斯先生
{
转换：翻译（-50%，-40%）；
z指数：1；
位置：绝对位置；
左：50%；
最高：88.5%；
背景色：透明；
最小高度：100%；
}
PSol先生
{
宽度：120px；
高度：120px；
保证金：0自动；
-webkit边界半径：100%；
-moz边界半径：100%；
边界半径：100%；
字体：15px arial；
颜色：黑色；
边框：1px实心浅灰色；
背景：#20AC20；
}
$（文档）.ready（函数（）{
$（“.PSol”）。单击（函数（）{
$（.PSolCanvas.TSolCanvas”）.animate（{top:“50%”}）；
});
});
您需要尝试对动画执行回调
，以便在完成后进行提交。比如：
<script type='text/javascript'>
$(document).ready(function(){
$(".PSol").click(function(e) {
// You will want to prevent the natural submission of the form
e.preventDefault();
// Notice the function attached to the `.animate()`.
// This will fire after the animation is done.
$(".PSolCanvas, .TSolCanvas").animate({top: "50%"},function(){
$('.PSolCanvas').submit();
});
});
});
</script>
/functions/myfunctions.php
<?php
// Make some defines
define("DB_USERNAME",'username');
define("DB_PASSWORD",'password');
define("DB_HOST",'host');
define("DB_DATABASE",'database');
<?php
// Make some functions to make things cleaner/universal
function connection()
{
return mysqli_connect(DB_HOST, DB_USERNAME, DB_PASSWORD, DB_DATABASE);
}
// Make a function that you can reuse
function updateTable($val,$con)
{
return (mysqli_query($con, "UPDATE table SET column='' WHERE id = {$val}"));
}
您希望在动画运行后提交表单。要做到这一点，您需要阻止默认的“提交”，然后使用jQuery animate调用上的回调函数添加您自己的。这将仅在动画完成后调用.submit（）。类似于（请注意，我还没有机会检查此代码，但它应该能让您大致了解：
$(document).ready(function(){
$(".PSol").click(function(e) {
e.preventDefault();
$(".PSolCanvas, .TSolCanvas").animate({top: "50%"},
function() {
$("form").submit();
}
);
});
});
你想让点击动画在表单提交之前完成吗？是这样吗？@Rasclatt我想这样可以让动画完成，但是我不知道如何设置提交延迟。你给动画添加了一个回调。看了多一点后，动画现在工作了，但更新不再工作，我不知道你是否需要你知道如何让它工作吗？就像它不提交post数据一样？它将在第一次单击时执行提交，但不执行动画，然后在第二次单击时，它将向上移动动画，但不执行提交，然后跳回起始位置。那么当按钮为c时，应该一步一步发生的一系列事件是什么点击它应该向上移动屏幕并停止，一旦停止，它应该向数据库提交一个更新。相反，发生的事情是你第一次点击会将更新发送到数据库，然后每次点击后都会向上移动按钮，但不会停止，而是移回起始位置。我知道没有表单animate（）将向上移动按钮并将其保留在那里
$(document).ready(function(){
$(".PSol").click(function(e) {
e.preventDefault();
$(".PSolCanvas, .TSolCanvas").animate({top: "50%"},
function() {
$("form").submit();
}
);
});
});