淡入淡出使用Javascript的文本

Question

我正在尝试使一些JavaScript文本淡入淡出。

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

我只设法创建淡入效果，但不淡出：实现此效果的简单方法是什么？

代码片段：

CSS为错误消息：

#pwd_not_equ{ 
opacity:0; 
transition: opacity 2s; 
color:red; 
} 

JS功能，它检查两个密码等于：

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

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

    }; 

错误消息本身是一个简单的号码：

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

谢谢。

Answer 1

我有一个小例子，我希望它能帮助你！我在这个上使用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 2

既然你已经拥有jQuery的你不妨使用fadeIn和fadeOut方法：

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

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

Answer 3

您没有设置不透明度为0，在任何你的代码，这将工作：

$('#pass1, #pass2').change(function() { 
    if ($("#pass1").val() != $("#pass2").val() && $("#pass1").val().length != 0) { 
     $("#pwd_not_equ").css('opacity','1'); 
    } else $("#pwd_not_equ").css('opacity','0'); 
}); 

Answer 4

jQuery的也有拨动

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

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