0

ページ内の要素をアニメーション化しようとしています。クリック条件で効果のあるズームインを探しています。div をクリックすると、その div がページになります。

アニメートを機能させます。ただし、 addClass 関数は機能しません。

また、ユーザーがスクロールしたり自動化された要素にスクロールを使用しています。したがって、スクロールを制御する div は、実際の要素の上にフェードします。要素をクリックしてアニメーション化すると、機能します。どんどん高くなっていきますが、位置と z-index を操作できません。だから私はそれを解決するために addClass 関数を追加しようとしましたが、うまくいきません!?

これが私のコードです

$("#bloc1").live('click', function(){
    $("#bloc1").animate({
        width: "800px",
        margin: "0px",
        height: "100%",
    },3000);

    $('#bloc1').addClass('figureclick');  
});

こちらのテストページでもお試しいただけます。効果を確認するには、「le block 1」をクリックしてください。

ご支援いただきありがとうございます！

アップデート ！！

私は HTML5 CSS3 を使用して div im を使用していません。それらは単純な figure /figure タグであり、CSS は #container figure のようになります{}

addclass の動作を妨げますか?

4

3 に答える 3

2

構文の強調表示ですべてがわかります。エスケープするバックスラッシュを削除する必要があります。.live()も 1 つの関数しか使用しないため、2 つを同じ関数に結合します。

$("#bloc1").live('click', function(){
    $("#bloc1").animate({
        width: "800px",
        margin: "0px",
        height: "100%",
    },3000);

    $('#bloc1').addClass('figureclick');  
});
于 2011-02-08T03:14:02.217 に答える
2

ネストされた関数またはエスケープ スラッシュがある理由がわかりません。あなたはこれを行うことができるはずです...

$("#bloc1").live( 'click', function() {
  $(this).animate({
    width: "800px",
    margin: "0px",
    height: "100%"
  },3000 ).addClass('figureclick') ; 
});
于 2011-02-08T03:15:35.113 に答える
2

animate オプションの後の末尾のカンマには注意してください。これにより、IE で問題が発生します。

また、以下のように連鎖を利用することもできます。

$("#bloc1").live('click', function(){
    $(this).animate({
        width: "800px",
        margin: "0px",
        height: "100%"
    },3000).addClass('figureclick'); 
});

最後に、アニメーションの完了後にクラスを追加する場合は、次のようなコールバック関数を使用できます。

$("#bloc1").live('click', function(){
    $(this).animate({width: "800px", margin: "0px", height: "100%"}, 3000, function() {
      $(this).addClass('figureclick');
    });
});
于 2011-02-09T01:22:18.167 に答える