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

デモ: https://jsfiddle.net/7uR8z/3/

于 2012-05-12T16:57:15.510 に答える
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 に答える
1

私は快適なcss/jQueryを使用して解決策を見つけることができました。元の問題: 要素が領域の外にぶら下がっているため、アニメーション中に可視性を強制的に表示する必要がありました。そうすることで、アニメーション中にも大きなテキスト ブロックがコンテンツ領域の外にぶら下がるようになりました。

解決策は、メインテキスト要素を不透明度 0 で開始し、addClass挿入して不透明度 1 に移行するために使用することでした。次にremoveClass、もう一度クリックすると。

これを行うには、すべてjQqueryの方法があると確信しています。私はそれをする男ではありません。:)

つまり、最も基本的な形で...

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

みんな助けてくれてありがとう。

于 2013-05-17T15:02:28.693 に答える