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

【问题标题】：Changing the opacity of a div with a PHP 'while' loop使用 PHP 'while' 循环更改 div 的不透明度
【发布时间】：2014-09-15 19:41:30
【问题描述】：

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

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

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

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

【问题讨论】：

你不明白 PHP 是干什么用的。你必须用JavaScript来做，PHP在这里无关。
我完全理解 PHP 的用途。我正在用它做实验，看看是否可以将它用于效果。
为标头已发送错误做好准备...
正如@TomaszKowalczyk 已经说过的，这绝对不是 PHP 领域...您需要了解服务器端和客户端脚本之间的区别...如果您不想要 JavaScript，您可以查看关键帧动画在 CSS 中。
“我完全理解 PHP 的用途。我正在用它做实验，看看是否可以将它用于效果。” - 你之前理解它，那么你就会知道即使尝试这个也没有意义.

标签： php html css loops while-loop

【解决方案1】：

你可以这样实现它：

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

您可以找到完整的源代码here

【讨论】：

【解决方案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，覆盖之前粘贴在页面上的规则，没有动画。

您可以通过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 );

我希望这开始为您指明实现这一目标的正确方向。

【讨论】：