1

キーフレームなしで css に複数の -webkit-transition アニメーションをチェーンしようとしています。

キーフレームアニメーションを呼び出すとそれが可能であることはわかっていますが、プロパティを上書きしたいだけで、このJSの何かが機能しません:

var firstTransition = { '-webkit-transition': 'opacity 1000ms ease-in 1000ms', 'opacity': 1 }
var secondTransition = { '-webkit-transition': 'opacity 1000ms ease-in 1000ms', 'opacity': 0 }

$('theDiv').setStyles(firstTransition)

changeColor.delay(3000);

function changeColor(){

    $('theDiv').setStyles(secondTransition);
}

これがフィドルです： http://jsfiddle.net/a2co/Tn9mT/25/

4

2 に答える 2

0

フィドルでは、要素は可視性も取得します：非表示。jQueryは賢くしようとしていると思います。0を0.01に変更します。

于 2011-09-10T19:42:20.770 に答える
0

CSS3 に関連するチェーンとコールバックを簡単に処理できるjQuery Transitなどのフレームワークを使用すると、もう少しクリーンな代替アプローチが可能になります。

Javascript:

    $('#theDiv').transition({opacity: 1}, 1000, 'in', function () { 
         //Callback
         $(this).transition({opacity: 0, delay: 3000}); });

JS フィドルのデモ

于 2013-03-22T17:06:29.780 に答える