.item:hover {
zoom: 1;
filter: alpha(opacity=50);
opacity: 0.5;
-webkit-transition: opacity .15s ease-in-out;
-moz-transition: opacity .15s ease-in-out;
-ms-transition: opacity .15s ease-in-out;
-o-transition: opacity .15s ease-in-out;
transition: opacity .15s ease-in-out;
}
为什么这只会在我悬停时仅为不透明度设置动画,而不是在我用鼠标离开对象时?
在这里演示:http://jsfiddle.net/7uR8z/
答案 0 :(得分:183)
您只将转换应用于:hover
伪类,而不应用于元素本身。
.item {
height:200px;
width:200px;
background:red;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-ms-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
}
.item:hover {
zoom: 1;
filter: alpha(opacity=50);
opacity: 0.5;
}
演示:http://jsfiddle.net/7uR8z/6/
如果您不希望转换影响mouse-over
事件,而只影响mouse-out
,则可以关闭:hover
状态的转场:
.item:hover {
-webkit-transition: none;
-moz-transition: none;
-ms-transition: none;
-o-transition: none;
transition: none;
zoom: 1;
filter: alpha(opacity=50);
opacity: 0.5;
}
答案 1 :(得分:2)
我设法找到了一个使用css / jQuery的解决方案,我很满意。原始问题:我必须强制在动画时显示可见性,因为我有元素悬挂在该区域之外。这样做,在动画期间,大块文本现在挂在内容区域之外。
解决方案是启动不透明度为0的主要文本元素,并使用addClass
注入并转换为不透明度为1.然后再次单击时removeClass
。
我确信所有jQquery方法都可以做到这一点。我不是那样做的人。 :)
所以这是最基本的形式......
.slideDown().addClass("load");
.slideUp().removeClass("load");
感谢大家的帮助。
答案 2 :(得分:1)
$(window).scroll(function() {
$('.logo_container, .slogan').css({
"opacity" : ".1",
"transition" : "opacity .8s ease-in-out"
});
});