Question

我希望有人可以通过代码与我进行对决，以实现这一目标：

用户点击按钮;
按钮消失;
文字淡化说“已保存！”在按钮的相同位置;
文字淡出;
按钮（从第2步开始）重新出现。

这是按钮的代码：

<input type="submit" name="gravarpalp" value="Save" />

提前致谢！

Answer 1

我会用jquery来完成这个。首先，将控件放在div中，并设置以下css属性

<div>
<span id="fadeSpan" style='position: relative; display: none;>Saved!</span>
<input id="fadeButton" type="submit" name="gravarpalp" value="Save" style='position: relative;' onclick='fadeEffect();' />
</div>

然后在脚本标记中添加以下函数。虽然没有经过测试，但这只是为了让你开始。

function() fadeEffect(){
     $('#fadeButton').fadeToggle();
     $('#fadeSpan').fadeToggle();
     setTimeout(function(){
          $('#fadeButton').fadeToggle();
          $('#fadeSpan').fadeToggle();
     }, 3000);

}

Answer 2

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(e) {
    $('#saveme').click(function() {
        $('#saveme').fadeOut('slow', function() {
            $('#saved').fadeIn('slow', function() {
                $('#saved').fadeOut('slow', function() {
                    $('#saveme').fadeIn('slow', function() {

                    });
                });
            });
        });
    });
});
</script>
</head>

<body>
<div id="saved" style="position:absolute;top:10px;left:10px;display:none">Saved</div>
<input type="submit" name="gravarpalp" value="Save" id="saveme" style="position:absolute;top:10px;left:10px;"/>
</body>
</html>

Answer 3

结帐this link.看起来您应该只能将标签的ForeColor设置为具有不同Alpha值的颜色值。

button1.Visible = false;

//make label fade in (alpha value++)
//once opacity reaches 255, make it fade out (alpha value--)

button1.Visible = true;

我认为你需要某种计时器，所以淡入淡出并不是那么即时。如果你需要，我会尝试更好地解释。

编辑：对不起，我认为这是一个WinForms应用程序...这对于Web应用程序来说不起作用。尝试使用jQuery或javascript。

按钮onClick淡入淡出文本

3 个答案: