1

質問はかなり自明だと思います。私が使用しているコードは次のとおりです。

function wkHover(){

    $('.worksItem').hover(function() {
            $('.worksItem').animate({ opacity: '0.5' }, 400, 'swing');
            $(this).css({ opacity : '1' });
            $(this).animate({ marginTop: '-10px' }, 400, 'swing');
        }, function(){
            $('.worksItem').animate({ opacity: '1' }, 400, 'swing');
            $(this).animate({ marginTop: '0' }, 400, 'swing');
        });
    }

ホバーされたものの不透明度を1に設定することを除いて、それはすべてを行います.何かアイデアはありますか?

4

2 に答える 2

4

おそらくanimate、次の行が実行されるまでに が終了していないためです。まったくアニメーションしないように、notフィルターで除外します。this li

function wkHover(){

    $('.worksItem').hover(function() {
            $('.worksItem').not(this).animate({ opacity: '0.5' }, 400, 'swing');
            $(this).animate({ marginTop: '-10px' }, 400, 'swing');
        }, function(){
            $('.worksItem').animate({ opacity: '1' }, 400, 'swing');
            $(this).animate({ marginTop: '0' }, 400, 'swing');
        });
    }

例: http://jsfiddle.net/fkaP6/

于 2012-01-25T02:30:54.177 に答える
0

どうぞ。純粋な CSS:

.foo {
    opacity: 0.5;
    margin-top: 3em;
    -moz-transition: opacity, margin-top 0.4s ease-in-out;
    -webkit-transition: opacity, margin-top 0.4s ease-in-out;
    -o-transition: opacity, margin-top 0.4s ease-in-out;
    -ms-transition: opacity, margin-top 0.4s ease-in-out;
    transition: opacity, margin-top 0.4s ease-in-out;
}

.foo:hover {
    opacity: 1;
    margin-top: 2.2em;
}

ライブデモ: http://jsfiddle.net/QxMfq/5/show/

ただし、バージョン 10 より前の IE ではアニメーションは機能しません。ただし、IE での結果は依然としてしっかりしています (アニメーションがないだけです)。もう 1 つのことは、(ご覧のとおり)transitionさまざまなブラウザーに対して宣言を数回繰り返す必要があることです。しかし、CSS アニメーションははるかに堅牢で、パフォーマンスが高く、保守が容易であるため、これはわずかな代償にすぎません。

于 2012-01-25T03:36:49.170 に答える