鼠标移出时的过渡不透明度?

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

Why does this only animate the opacity when I hover-in but not when I leave the object with the mouse?

为什么只有当我悬浮在物体上的时候，不透明才会被激活，而当我把物体放在鼠标上的时候，不透明才会被激活?

Demo here: http://jsfiddle.net/7uR8z/

演示:http://jsfiddle.net/7uR8z/

4 个解决方案

#1

164

You're applying transitions only to the :hover pseudo-class, and not to the element itself.

您只是将转换应用到: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;
}

Demo: http://jsfiddle.net/7uR8z/6/

演示:http://jsfiddle.net/7uR8z/6/

If you don't want the transition to affect the mouse-over event, but only mouse-out, you can turn transitions off for the :hover state :

如果您不希望转换影响鼠标悬停事件，而只希望鼠标悬停事件，您可以关闭转换为: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;
}

Demo: http://jsfiddle.net/7uR8z/3/

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

#2

by the way i was strugglin with this in FIREFOX until i realized you have a typo in the word opacity:

顺便说一下，我在火狐浏览器上一直在纠结这个问题，直到我意识到你在“不透明”这个词中输入了一个错误:

-moz-transition: opacity .15s ease-in-out;

needs to be

需要

-moz-transition: opacity .15s ease-in-out;

#3

I managed to find a solution using css/jQuery that I'm comfortable with. The original issue: I had to force the visibility to be shown while animating as I have elements hanging outside the area. Doing so, made large blocks of text now hang outside the content area during animation as well.

我设法找到了一个使用css/jQuery的解决方案，我对此很满意。最初的问题是:我必须在动画时强制显示可见性，因为我有元素挂在该区域之外。这样，在动画期间，就可以在内容区域外挂起大块的文本。

The solution was to start the main text elements with an opacity of 0 and use addClass to inject and transition to an opacity of 1. Then removeClass when clicked on again.

解决方案是以0的不透明度启动主文本元素，并使用addClass注入并转换为1的不透明度。然后在再次单击时远程调用。

I'm sure there's an all jQquery way to do this. I'm just not the guy to do it. :)

我确信有一个所有的jQquery方法可以做到这一点。我只是不适合做这件事。:)

So in it's most basic form...

这是最基本的形式。

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

Thanks for the help everyone.

谢谢大家的帮助。

#4

$(window).scroll(function() {    
    $('.logo_container, .slogan').css({
        "opacity" : ".1",
        "transition" : "opacity .8s ease-in-out"
    });
});

Check the fiddle: http://jsfiddle.net/2k3hfwo0/2/

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

#1

164