如何在Javascript中更改元素的显示属性时使其元素淡入和淡出? [英] How can I make my elements fade in and out as their display attributes are changed in Javascript?
问题描述
单击按钮(使用onclick)时，我在none和block之间切换了三个div的显示样式.我不知道如何使这些div淡入淡出.我也愿意使用JQuery，但是在这里我看不到如何集成和使用fadeIn()和fadeOut()函数.任何有关如何进行此操作的建议将不胜感激.
On the click of a button (using onclick), I am toggling the display style of three divs between none and block. I am at a loss as to how I can make these divs fade in and out. I am open to using JQuery as well but I do not see how I could integrate andéor use the fadeIn() and fadeOut() functions here. Any suggestions as to how I can go about doing this would be greatly appreciated.
下面是被称为onclick以供参考的函数，这是在我的div的显示属性之间进行切换的地方.
Below is the function that is being called onclick for reference, this is where the display attribute of my divs is toggled.
function divSelector(count){
if (count == 1){
var temp = document.getElementById('second-about-text');
temp.style.display = 'none';
temp = document.getElementById('third-about-text');
temp.style.display = 'none';
temp = document.getElementById('first-about-text');
temp.style.display = 'block';
}
else if (count == 2){
var temp = document.getElementById('first-about-text');
temp.style.display = 'none';
temp = document.getElementById('third-about-text');
temp.style.display = 'none';
temp = document.getElementById('second-about-text');
temp.style.display = 'block';
}
else if (count == 3){
var temp = document.getElementById('first-about-text');
temp.style.display = 'none';
temp = document.getElementById('second-about-text');
temp.style.display = 'none';
temp = document.getElementById('third-about-text');
temp.style.display = 'block';
}
else{
console.log("Count is nothing.");
}
}
推荐答案
以下是为您提供的完整示例:
Here is a fully contained example for you:
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<style>
.btn {height:50px;width:50px;margin:50px 50px;}
.one{background-color:red;}
.two{background-color:green;}
.three{background-color:blue;}
</style>
<script type="text/javascript">
$(document).ready(function() {
count = 1;
$('#mybutt').click(function() {
divSelector(count);
count++;
if (count==4) count = 1;
});
function divSelector(count){
if (count == 1){
$('#first-about-text').fadeIn(1000);
$('#second-about-text').hide();
$('#third-about-text').fadeOut(1000);;
}else if (count == 2){
$('#first-about-text').fadeOut(1000);
$('#second-about-text').fadeIn(1000);
$('#third-about-text').hide();;
}else if (count == 3){
$('#first-about-text').hide();
$('#second-about-text').fadeOut(1000);
$('#third-about-text').fadeIn(1000);;
}else{
console.log("Count is nothing.");
}
}
}); //END $(document).ready()
</script>
</head>
<body>
<div id="first-about-text" class="btn one"></div>
<div id="second-about-text" class="btn two"></div>
<div id="third-about-text" class="btn three"></div>
<input type="button" id="mybutt" value="Click Me">
</body>
</html>
这篇关于如何在Javascript中更改元素的显示属性时使其元素淡入和淡出?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
