2

私は、爆発効果で要素が非表示になり、その後テキストが表示されるようになる単純なアニメーションであると想定されているものに取り組んでいます。

これは、コードとアニメーションを含むjsfiddleです。

爆発はここで呼び出されます：

jQuery('.bubble1').on('click', function () {
 jQuery(this).hide('explode', { pieces: 16 } , 1000, function() { jQuery('.mytext').show(); } );
});

問題は、爆発アニメーションが要素の半分にすぎないように見えるもの、または位置が変更されたものでのみ実行されているため、結果が私が達成したかったものではないことです。

考えられる解決策について何か提案はありますか？

4

2 に答える 2

2

問題は、次のようにcssルールによって与えられる要素の初期位置でした。

.bubble1 {
  border: 2px solid #000;
  border-radius: 100px;
  height: 100px;
  width: 100px;
  position: absolute;
  bottom: -104px;
  left: 50%;
  margin-left: -52px;
}

ページの要素を中央に配置するためのマージンルールにより、アニメーションが正しく動作しませんでした。

複雑な計算や複雑なスクリプトを使用せずにこれを修正するために、マージンルールを使用する代わりに、移動の初期位置を変更しました。

var bezier_params = {
  start: {
    x: jQuery('.bubble1').offset().left-52,
    y: jQuery('.bubble1').offset().top,
  },
  end: {
    x: jQuery('.bubble1').offset().left-52,
    y: 110,
  }
}

要素の全幅の半分（幅+境界線）を位置から削除することにより、要素はページの中央に正しく配置されます。

于 2013-01-18T11:20:09.183 に答える
0

問題は、要素の分解をCSSで設定していることmarginに起因します。left代わりにプロパティを変更する必要があります。

JSFIDDLEは単なる例であり、要素を中央に配置するには、正確な左の値を見つける必要があります。 http://jsfiddle.net/2TKta/45/

于 2013-01-18T11:09:59.403 に答える