淡入淡出使用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'); 
});