1

http://jsfiddle.net/cD4Gr/4/

ルコード：

$j(document).bind('click', function() { 
    $j("#test").css({ bottom:0px })
    });

インスペクターを見ると、要素がページの上部にある場合でも、下部の値は0であると表示されます。

どういうわけか、アニメーションを逆に再生する必要がありますか？または別のアニメーションを再生しますか？（上位％ではなく下位％を使用）

4

2 に答える 2

3

あなたが考えていたように、あなたはそれを一番下にリセットするために2番目のキーフレームブロックを作ることができます：

@-webkit-keyframes reset_to_bottom {
    0%, 100% {
        top: auto;
        bottom: 0;
        z-index: 1000000;
        opacity: 0.5;
    }
}

次に、jQueryにアニメーション名を変更させます。

$j("#test").css({
    '-webkit-animation-name': 'reset_to_bottom'
});

jsfiddle

フォワードを使用-webkit-animation-fill-mode: forwards;すると、最後のキーフレームスタイルが維持されるため、top:0%まだ設定されているためbottom:0、効果がありませんでした

楽しみのために...アニメーションの各クリックを切り替えます

jsfiddle

$j(document).bind('click', function() {
    if ($j("#test").css('-webkit-animation-name') == "slide_to_top") {
        $j("#test").css({'-webkit-animation-name': 'reset_to_bottom'});
    } else {
        $j("#test").css({'-webkit-animation-name': 'slide_to_top'});
    }
});
于 2011-10-28T18:56:06.860 に答える
0

状況を正しく理解していれば、これらの変更で問題が解決すると思います。

CSS：

#test {
  ...
  //bottom: 0px; //Remove this line
  top:100%;      //Replace with this
  ...
}

JavaScript：

//$j("#test").css({ bottom:0px })
$j("#test").css({ top:0 })

animate()ちなみに、アニメーションにはCSSではなくjQuery関数を使用する方が好きです。これは、主に、すべての主要なブラウザーがすでにサポートされているためです。そうすれば、ブラウザごとに複数のCSSスタイルを含めることを心配する必要はありません。

于 2011-10-28T18:54:49.107 に答える