如何在Javascript中更改其显示属性时，如何使我的元素淡入淡出？
单击一个按钮（使用onclick），我在none和block之间切换三个div的显示样式。 我不知道如何让这些div消失。 我也愿意使用JQuery，但我不知道如何在这里集成和使用fadeIn()和fadeOut()函数。 关于如何做到这一点的任何建议将不胜感激。
下面是被调用onclick以供参考的函数，这是我的div的display属性被切换的地方。
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."); } }
以下是一个完全包含的示例：
jsFiddle在这里
既然您对JQuery持开放态度，请尝试以下方式：
我只是在这里假设你的标记。 给你的div提供一个公共类说content以便用一个选择器访问它们。
$('.content:gt(0)').hide(); //start up hide all but the first one. function divSelector(count){ var currElem = $('.content:eq(' + count-1 + ')'); //get the div based on the count number eq will give the div based on its index and position in DOM. Assuming these divs appear in DOM one after the other. $('.content').not(currElem).fadeOut('1000', function(){ //Fade out other content divs currElem.fadeIn('1000'); //Fade in the current one. }); }
- ：GT（）
- ：EQ（）
- ：淡入（）
- ：淡出（）
提供您的标记将清除假设并帮助提供更好的解决方案。
这是你需要的吗？
function divSelector(count){ if (count == 1){ $('#second-about-text').fadeOut(); $('#third-about-text').fadeOut(); $('#first-about-text').fadeIn(); } else if (count == 2){ $('#second-about-text').fadeIn(); $('#third-about-text').fadeOut(); $('#first-about-text').fadeOut(); } else if (count == 3){ $('#second-about-text').fadeOut(); $('#third-about-text').fadeIn(); $('#first-about-text').fadeOut(); } else{ console.log("Count is nothing."); } }