我有一组div共享同一个类(optionsclass)。显示设置为阻止。当用户单击它们时,执行以下javascript函数,显示变为无。
function hideBlockElementsByClass(className)
{
var elements = document.getElementsByClassName(className);
for(i in elements)
{
elements[i].style.display = "none";
}
}
显示块和非显示块之间的过渡非常粗糙,我想进行更平滑的过渡。实现这一目标的最佳策略是什么?
使用CSS3:
.className {
opacity: 0;
visibility: hidden;
-webkit-transition: visibility 0.2s linear,
opacity 0.2s linear;
-moz-transition: visibility 0.2s linear,
opacity 0.2s linear;
-o-transition: visibility 0.2s linear,
opacity 0.2s linear;
}
.className:hover {
visibility: visible;
opacity: 1;
}
虽然Sridhar提供了一个很好的CSS3解决方案,但其他提到了Jquery。
在这里你可以找到一个纯粹的javascript / CSS解决方案:
https://codereview.stackexchange.com/questions/7315/fade-in-and-fade-out-in-pure-javascript
试试这个方法
HTML
<div class = "image" onclick = "eff()"></div>
CSS
.transition {
-moz-transition: 2s width;
width: 150px;
height: 100px;
}
脚本
function eff() {
var k = document.getElementsByClassName("image");
k[0].className = "transition";
}
在普通的javascript尝试这个:(将适用于IE10,chrome,firefox,safari,android,ios)
<script>
function hideBlockElementsByClass(className) {
var elements = document.getElementsByClassName(className);
console.log(elements.length)
for (var i = 0; i < elements.length; i++) {
(function (a) {
elements[a].addEventListener('webkitTransitionEnd', function () {
elements[a].style.display = "none";
}, false);
elements[a].addEventListener('mozTransitionEnd', function () {
elements[a].style.display = "none";
}, false);
elements[a].addEventListener('oTransitionEnd', function () {
elements[a].style.display = "none";
}, false);
elements[a].addEventListener('transitionend', function () {
elements[a].style.display = "none";
}, false);
})(i);
elements[i].style.webkitTransitionDuration = "1s";
elements[i].style.mozTransitionDuration = "1s";
elements[i].style.oTransitionDuration = "1s";
elements[i].style.transitionDuration = "1s";
elements[i].style.opacity = "0";
}
}
</script>
我的代码:
<a href="javascript:ShowDiv('MyMesage');"> Click here</a>
<div id="MyMesage" style="display:none;opacity:0; background-color:pink; margin:0 0 0 100px;width:200px;">
blablabla
</div>
<script>
function ShowDiv(name){
//duration of transition (1000 miliseconds equals 1 second)
var duration = 1000;
// how many times should it should be changed in delay duration
var AmountOfActions=100;
var diiv= document.getElementById(name);
diiv.style.display = 'block';
var counte=0;
setInterval(function(){
counte ++; if ( counte<AmountOfActions) { diiv.style.opacity = counte/AmountOfActions;}
},
duration / AmountOfActions);
}
</script>