Question

在我的PHP脚本中按下按钮后，标题位置将更改为另一个页面。我想做一些更独特的事情，并在页面改变之前使输入淡出。这就是我到目前为止所做的：

$i = 10;
$i10 = ($i / 100);

while (i >= 1) {
    echo '<style>
        #loginForm {
            opacity: ' . $i10 . ';
        }
        </style>';
    $i--;
}
sleep(1);
header('Location: ../index.php');

代码似乎不起作用。我需要做些什么来达到预期的效果？我宁愿在代码中避免使用任何jQuery或JavaScript。

Answer 1

你可以像这样实现它：

function changeOpacity(i){
  setInterval(function(){
  if(i>0){
    percenti= i/100;
 $(".div").css("opacity",percenti);
    i--;
    }
  },100);
}
changeOpacity(10);

您可以找到完整的来源here

Answer 2

这里有几点需要考虑：

<强> 1。在header（）函数调用之前，您无法输出任何HTML。

这将引发如下内容：

Warning: Cannot modify header information - headers already sent by (output started at /some/file.php:12) in /some/file.php on line 23

在动画完成或可能输出缓冲后，您需要查看JavaScript重定向。

<强> 2。您需要了解服务器端和客户端脚本之间的区别

你想要实现的目标在PHP中是不可能的，因为你将粘贴所有CSS代码，但只有最终值将用于CSS，覆盖粘贴在页面上的先前规则，没有动画。< / p>

您可以了解有关差异的更多on this page。

第3。查看CSS中的关键帧

您可以使用keyframes and animations in CSS实现不透明度动画，但请注意，并非所有浏览器都支持此功能，但在支持它的情况下，它的效果非常好。

以下示例：

@keyframes changeOpacity {
    from { opacity:0; }
    to { opacity: 1; }
}

#loginForm{

    animation: changeOpacity 1s;

}

<强> 4。看看jQuery / JavaScript

我知道你说你想避免使用JavaScript / jQuery，除了关键帧，你运气不好。 jQuery路由将更兼容跨浏览器，您将需要添加jQuery UI来执行动画，但您可以check them out on this link。

以下示例：

$( "#loginForm" ).animate( {opacity: "1" }, 1000 );

我希望这开始为你指明正确的方向，以实现这个目标。

使用PHP'while'循环更改div的不透明度

2 个答案: