1

さて、私は 2 つの jQuery 関数を持っています。それらの 1 つは、div に対する単純な爆発効果です。もう 1 つの関数は、パーティクルを div の周りに円状に送信することで、爆発効果を高めます。両方の機能が設定された状態で div をクリックすると、爆発効果のみが発生し、サイト上の破片の機能は発生しません。

何か奇妙なもの

jsfiddle では、破片は爆発ではなく機能していますが、私のサイトでは爆発効果は機能していますが、破片は機能していません。

jsfiddle の例を次に示します: jsfiddle.net/FYB98/3/

注: サイトと jsfiddle の例の両方で同じ jQuery バージョンを使用しています。これは jquery-1.9.1 です。

これは私のコードです

<style>
.debris {
 display: none;   
 position: absolute;
 width: 28px;
 height: 28px;
 background-color: #ff00ff;
 opacity: 1.0;
 overflow: hidden;
 border-radius: 8px;
}

#bubble {
  position:absolute;
  background-color: #ff0000;
  left:150px;
  top:150px;
  width:32px;
  height:32px;
  border-radius: 8px;
  z-index: 9;
}
</style>
<div id="content">
    <div id="bubble"></div>
    <div id="dummy_debris" class="debris" />
</div>
<script>
// jQuery bubble pop animation
// Ben Ridout (c) 2013 - http://BenRidout.com/?q=bubblepop
// You're free to use this code with above attribution (in source is fine).

$(function(){
  // Document is ready
  $("#bubble").on("click", function(e) {
    pop(e.pageX, e.pageY, 13);
  });
});
 $( "#bubble" ).click(function() {
  $( this ).toggle( "explode", {pieces: 50 }, 2000);

});
function r2d(x) {
    return x / (Math.PI / 180);
  }

  function d2r(x) {
    return x * (Math.PI / 180);
  }

  function pop(start_x, start_y, particle_count) {
    arr = [];
    angle = 0;
    particles = [];
    offset_x = $("#dummy_debris").width() / 2;
    offset_y = $("#dummy_debris").height() / 2;

    for (i = 0; i < particle_count; i++) {
      rad = d2r(angle);
      x = Math.cos(rad)*(80+Math.random()*20);
      y = Math.sin(rad)*(80+Math.random()*20);
      arr.push([start_x + x, start_y + y]);
      z = $('<div class="debris" />');
      z.css({
          "left": start_x - offset_x,
          "top": start_y - offset_x
      }).appendTo($("#content"));
      particles.push(z);
      angle += 360/particle_count;
    }

    $.each(particles, function(i, v){
      $(v).show();
      $(v).animate(
        {
          top: arr[i][1], 
          left: arr[i][0],
          width: 4, 
          height: 4, 
          opacity: 0
        }, 600, function(){$(v).remove()
      });
    });
  }
</script>
4

2 に答える 2

5

あなたのフィドルから、あなたが含めなかったようですjQuery UI。

このフィドルをチェックしてください

于 2013-08-07T18:14:28.653 に答える
0

$(function)ハンドラーに 2 番目のクリック イベントを入れていません。両方のイベントを$(function)ハンドラーに入れる

$(function(){
  // Document is ready
  $("#bubble").on("click", function(e) {
    pop(e.pageX, e.pageY, 13);
  });

$( "#bubble" ).click(function() {
  $( this ).toggle( "explode", {pieces: 50 }, 2000);

});
});

動作デモ: http://jsfiddle.net/FYB98/9/

于 2013-08-07T18:16:11.503 に答える