120
.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;
    }

为什么这只会在我悬停时为不透明度设置动画,而当我用鼠标离开对象时却没有?

在这里演示:https ://jsfiddle.net/7uR8z/

​</p>

4

3 回答 3

208

您仅将转换应用于: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;
}

演示:https ://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;
}

演示:https ://jsfiddle.net/7uR8z/3/

于 2012-05-12T16:57:15.510 回答
1

我设法使用 css/jQuery 找到了一个我觉得很舒服的解决方案。最初的问题:我不得不在制作动画时强制显示可见性,因为我有元素悬挂在该区域之外。这样做,大块文本现在在动画期间也挂在内容区域之外。

解决方案是以不透明度为 0 开始主要文本元素,并用于addClass注入和过渡到不透明度为 1。然后removeClass再次单击时。

我敢肯定有一个全 jQquery 的方式来做到这一点。我只是不适合这样做。:)

所以这是最基本的形式......

.slideDown().addClass("load");
.slideUp().removeClass("load");

感谢大家的帮助。

于 2013-05-17T15:02:28.693 回答
1
$(window).scroll(function() {    
    $('.logo_container, .slogan').css({
        "opacity" : ".1",
        "transition" : "opacity .8s ease-in-out"
    });
});

检查小提琴:https ://jsfiddle.net/2k3hfwo0/2/

于 2015-01-11T17:49:13.980 回答