Question

我正在尝试制作一个让一些文字淡入淡出的javascript函数。

例如，在表单中，提交按钮将检查输入的有效性;如果它们无效，则会显示一条消息几秒钟。

我只设法创造了淡入效果，但没有淡出：实现这个的简单方法是什么？

代码段：

错误消息的CSS：

if ($("#pass1").val() != $("#pass2").val() && $("#pass1").val().length != 0)  {

        document.getElementById("pwd_not_equ").style.opacity="1";
        return false;

    };

检查两个密码是否相等的JS函数：

<p id="pwd_not_equ"> Passwords must be equal! </p>

错误信息本身就是一个简单的p：

public static Task<bool> UsingEnumerator(this Task<bool> task, IDisposable disposable)
{
    task.ContinueWith(t =>
    {
        if (t.IsFaulted)
        {
            var ignored = t.Exception; // don't remove!
        }

        if (t.IsFaulted || t.IsCanceled || !t.Result)
            disposable.Dispose();
    }, TaskContinuationOptions.ExecuteSynchronously);

    return task;
}

感谢。

Answer 1

由于您已经拥有jQuery，因此您也可以使用fadeIn和fadeOut方法：

$(element).fadeIn();
$(element).fadeOut();

文档：http://api.jquery.com/fadeout/

Answer 2

我有一个小例子，希望它可以帮到你！我在这个上使用jQuery，但如果它对你来说有问题，请告诉我，我将用纯javascript制作一个。

$('.fadeout').click(function() {
    $('#target').fadeOut('normal');
});

$('.fadein').click(function() {
    $('#target').fadeIn('normal');
});

$('.fd-to').click(function() {
    $('#target').fadeTo('fast', 0.5);
});

$('.fd-to1').click(function() {
    $('#target').fadeTo(1000, 1);
});

body {padding:30px;}

#target {
  background:#dfabba;
  margin-bottom:15px;
  height:200px;
  padding:5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- fadeIn, fadeOut dan fadeTo -->
<button class="fadeout">FadeOut!</button>
<button class="fadein">FadeIN!</button>
<button class="fd-to">FadeTo 0.5</button>
<button class="fd-to1">Reset</button>
<div id="target"></div>

Answer 3

您没有在任何代码中将不透明度设置为0，这将起作用：

(Model View ViewModel)

Answer 4

jquery也有切换

http://jsfiddle.net/bdellinger/ukyvpsbf/

$('#btn').click(function(){
    $( "#pwd_not_equ" ).toggle('slow');   
});

淡入淡出，使用Javascript淡出文本

4 个答案: