2

ページと同じ効果を得る方法（jQueryを使用）があるかどうか疑問に思います-顧客は同じ効果を望んでいますが、jQuery（これはactionscriptにあります-http ://www.shoppingmetropolitanobarra.com.br/site/web /lojas.php）。

jQueryコードに変換しようとしましたが、成功しませんでした。

http://jsfiddle.net/pq667/2/

いくつかのコンテナがあり、それぞれがjQueryanimateメソッドを使用する複数のサムネイルを持っています。つまり、コンテナが完成している場合は、fadeOutエフェクトとfadeIn次のコンテナを使用する必要があります（ページが読み込まれるときに発生します）。

助言がありますか？

4

4 に答える 4

1

私はよくこのスニペットをhttp://paulirish.com/2008/sequentially-chain-your-callbacks-in-jquery-two-ways/から変更します。temp01を介した任意のjQueryオブジェクトの自己実行コールバックチェーン

(function hidenext(jq){
    jq.eq(0).fadeOut("fast", function(){
        (jq=jq.slice(1)).length && hidenext(jq);
    });
})($('div#bodyContent a'));

上記のものを次のように変更できます。

$('.block').hide();

(function showNext(ele){
    ele.eq(0).fadeIn('slow', function(){
        (ele=ele.slice(1)).length && showNext(ele);
    });
})($('.block'))​

これが私があなたに可能性を示すためにセットアップしたjsFiddleです：http：//jsfiddle.net/hqgVS/

于 2012-10-10T16:47:03.860 に答える
1

この正確な効果は、CSS3変換でのみ可能です。この理由は、テキストのスケーリングです。もちろん、要素のサイズやフォントを変更することで偽造することもできますが、目的の効果を実現するのは非常に困難です。

例えば：

jQuery：

$('li').each(function(i, el) {
    setTimeout(function() {
        $(el).addClass('show');
    }, ($('li').length - i) * 500);
});​

CSS：

li.show{
   -webkit-transition:all 1s ease-out;
   opacity:1;
   -webkit-transform:scale(1);   
}

デモ： http： //jsfiddle.net/6xL7R/
（他のベンダーのプレフィックスを省略したため、ChromeなどのWebkitブラウザーで表示）

ただし、jQueryを使用して不透明度アニメーションを実行できます。

jQuery：

$('li').css({'opacity':0}).each(function(i,el){
    $(el).delay(($('li').length-i)*500).animate({'opacity':1},1000);
});

（私のフィドルのコメント部分）

たぶん、2つの組み合わせがあなたのためにうまくいくでしょうか？互換性のあるブラウザでスケールを表示します。

または、 http：//modernizr.com/でブラウザを確認してください

于 2012-10-10T16:58:33.830 に答える
0

ご覧のとおり、ポジショニングを試す必要がありますが、これにより、要求したフェードイン、遅延、フェードアウトが実行されます...

http://jsfiddle.net/pq667/11/

これは、最初のアニメーションの後に別の遅延を追加し、次に別のアニメーションを追加して反対のことを行う場合でした。

それらすべてを絶対的に配置し、比較的配置されたコンテナ内に配置し、位置（左と上）と幅と高さをアニメーション化することをお勧めします。

于 2012-10-10T16:39:01.530 に答える
0

私の例http://jsfiddle.net/qEAJu/20/を見てください。そのズーム効果を実現したい場合は、cssトランジションにこのプラグインを使用することを検討してください。

于 2012-10-10T17:04:54.717 に答える