web-dev-qa-db-fra.com

CSS: opacité de la transition à la souris?

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

Pourquoi cela n'anime-t-il l'opacité que lorsque je survole, mais pas lorsque je quitte l'objet avec la souris?

Démo ici: http://jsfiddle.net/7/7RR8z/

Un séjour sobre

csscss3css-transitions
102
matt

Vous appliquez des transitions uniquement à la pseudo-classe :hover et non à l'élément lui-même.

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

Démo: http://jsfiddle.net/7/7uR8z/6/

Si vous ne souhaitez pas que la transition affecte l'événement mouse-over, mais uniquement mouse-out, vous pouvez désactiver les transitions pour l'état :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;
}

Démo: http://jsfiddle.net/7/7uR8z/3/

186
Sampson

J'ai réussi à trouver une solution avec css/jQuery avec laquelle je suis à l'aise. Le problème original: je devais forcer la visibilité de la visibilité lors de l'animation car des éléments pendaient à l'extérieur de la zone. Ce faisant, de grands blocs de texte sont maintenant suspendus en dehors de la zone de contenu pendant l’animation.

La solution consistait à démarrer les éléments de texte principaux avec une opacité de 0 et à utiliser addClass pour injecter et passer à une opacité de 1. Ensuite, removeClass lorsque vous cliquez à nouveau.

Je suis sûr qu'il existe un moyen très jQquery de le faire. Je ne suis juste pas le gars pour le faire. :)

Donc, dans sa forme la plus élémentaire ...

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

Merci à tous pour l'aide.

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

Vérifiez le violon: http://jsfiddle.net/2k3hfwo0/2/

1
Peter Darmis