無法在移動元素上使用fadeOut()隱藏-有解無憂

我做了一個小頁面，在隨機位置創建圓圈。

接下來，我制作了一個影片并在點擊時隱藏這些元素fadeOut()

這是它的作業原理 https://jsfiddle.net/n7za1t6r/

現在我希望所有這些創建的圈子在整個頁面上移動，我做到了，它們移動了，但是隱藏了fadeOut()停止作業。單擊時，影片有效，但元素未隱藏

可能是什么問題呢？

//create circle

var widthHeight = 45;
var margin = 25;
var delta = widthHeight   margin;

function createDiv(id, color) {
  let div = document.createElement('div');
  var currentTop = 0;
  var documentHeight = document.documentElement.clientHeight;
  var documentWidth = document.documentElement.clientWidth;
  div.setAttribute('class', id);
  if (color === undefined) {
    let colors = ['#35def2', '#35f242', '#b2f235', '#f2ad35', '#f24735', '#3554f2', '#8535f2', '#eb35f2', '#f2359b', '#f23547'];
    div.style.borderColor = colors[Math.floor(Math.random() * colors.length)];
  }
  else {
   div.style.borderColor = color; 
  }
  div.classList.add("circle");
  div.classList.add("animation");
  
  currentTop = Math.floor(Math.random() * documentHeight) - delta;
  currentLeft = Math.floor(Math.random() * documentWidth) - delta;
  
  var limitedTop = Math.max(margin * -1, currentTop);
  var limitedLeft = Math.max(margin * -1, currentLeft);

  div.style.top = limitedTop   "px";
  div.style.left = limitedLeft   "px";
        
  const nodes = document.querySelectorAll('.animation');
  for(let i = 0; i < nodes.length; i  ) {
  nodes[i].addEventListener('click', (event) => {
    event.target.style.animation = 'Animation 200ms linear';
    setTimeout(() => {
      event.target.style.animation = '';
    }, 220);  });
  }
  
  let clicks = 0;
 
  $(div).click(function() {
    $('#clicks').text(parseInt($('#clicks').text())   1);            
    $(this).fadeOut();
  });
  
  document.body.appendChild(div);
}
    
let i = 0;

const twoSecond = 2000;

setInterval(() => {
  i  = 1;
  createDiv(`circle${i}`);
  animateC();
}, twoSecond);

//move

function makeNewPosition(){
    
    // Get viewport dimensions (remove the dimension of the div)
    var h = $(window).height() - 50;
    var w = $(window).width() - 50;
    
    var nh = Math.floor(Math.random() * h);
    var nw = Math.floor(Math.random() * w);
    
    return [nh,nw];    
    
}

function animateC(){
    var newq = makeNewPosition();
    var oldq = $('.circle').offset();
    var speed = calcSpeed([oldq.top, oldq.left], newq);
    
    $('.circle').animate({ top: newq[0], left: newq[1] }, speed, function(){
      animateC();        
    });
    
};

function calcSpeed(prev, next) {
    
    var x = Math.abs(prev[1] - next[1]);
    var y = Math.abs(prev[0] - next[0]);
    var greatest = x > y ? x : y;
    
    var speedModifier = 0.1;// control the speed here 

    var speed = Math.ceil(greatest/speedModifier);
    return speed;

}

.circle {
  width: 35px;
  height: 35px;
  border-radius: 35px;
  background-color: #ffffff;
  border: 3px solid #000;
  margin: 20px;
  position: absolute;
}

@keyframes Animation {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(.8);
  }
  100% {
    transform: scale(1);
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

uj5u.com熱心網友回復：

.fadeOut()不再作業的原因是因為.fadeOut()內部使用.animate, 所以被添加到影片佇列中。

您可以通過洗掉animateC并更改您的 onclick 來確認這一點：

  $(div).click(function() {
    $('#clicks').text(parseInt($('#clicks').text())   1);            
    $(this).animate({ top:0 }, 100)
    $(this).fadeOut();
  });

fadeOut 僅在影片完成時運行。

但是，您在回圈中重新設定每個圓圈的影片，因此 .fadeOut() 被推到一個很長的佇列的后面，并且似乎永遠不會運行。

在下面的片段中，我限制了 3 個圓圈（有一個 hack ......不要這樣做，只是為了演示）。

如果您在第一次移動時單擊第一個并且在其他影片出現之前單擊它，那么您會看到它跳到頂部并淡出，如果您等到其他影片出現并單擊它們，那么您需要等到所有先前排隊的影片都完成，但它們最終會淡出（取決于您等待了多長時間）。

由于$(".circle").animate為每個圓圈添加了額外的影片，它在淡出之前多久取決于有多少圓圈。

//create circle

var widthHeight = 45;
var margin = 25;
var delta = widthHeight   margin;

function createDiv(id, color) {
  let div = document.createElement('div');
  var currentTop = 0;
  var documentHeight = document.documentElement.clientHeight;
  var documentWidth = document.documentElement.clientWidth;
  div.setAttribute('class', id);
  if (color === undefined) {
    let colors = ['#35def2', '#35f242', '#b2f235', '#f2ad35', '#f24735', '#3554f2', '#8535f2', '#eb35f2', '#f2359b', '#f23547'];
    div.style.borderColor = colors[Math.floor(Math.random() * colors.length)];
  }
  else {
   div.style.borderColor = color; 
  }
  div.classList.add("circle");
  div.classList.add("animation");
  
  currentTop = Math.floor(Math.random() * documentHeight) - delta;
  currentLeft = Math.floor(Math.random() * documentWidth) - delta;
  
  var limitedTop = Math.max(margin * -1, currentTop);
  var limitedLeft = Math.max(margin * -1, currentLeft);

  div.style.top = limitedTop   "px";
  div.style.left = limitedLeft   "px";

  
  let clicks = 0;
 
  $(div).click(function() {
    $('#clicks').text(parseInt($('#clicks').text())   1);            
    $(this).animate({ top:0 }, 100)
    $(this).fadeOut();
  });
  
  document.body.appendChild(div);
}
    
let i = 0;

const twoSecond = 2000;

createDiv(`circle${i}`);
setInterval(() => {
  i  = 1;
  if (i>3) return;
  createDiv(`circle${i}`);
  animateC();
}, twoSecond);

//move

function makeNewPosition(){
    
    // Get viewport dimensions (remove the dimension of the div)
    var h = $(window).height() - 50;
    var w = $(window).width() - 50;
    
    var nh = Math.floor(Math.random() * h);
    var nw = Math.floor(Math.random() * w);
    
    return [nh,nw];    
    
}

function animateC(){
    var newq = makeNewPosition();
    var oldq = $('.circle').offset();
    var speed = calcSpeed([oldq.top, oldq.left], newq);
    
    $('.circle').animate({ top: newq[0], left: newq[1] }, speed, function(){
      animateC();        
    });
    
};

function calcSpeed(prev, next) {
    
    var x = Math.abs(prev[1] - next[1]);
    var y = Math.abs(prev[0] - next[0]);
    var greatest = x > y ? x : y;
    
    var speedModifier = 0.1;// control the speed here 

    var speed = Math.ceil(greatest/speedModifier);
    return speed;

}

.circle {
  width: 35px;
  height: 35px;
  border-radius: 35px;
  background-color: #ffffff;
  border: 3px solid #000;
  margin: 20px;
  position: absolute;
}

@keyframes Animation {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(.8);
  }
  100% {
    transform: scale(1);
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

理想情況下，您希望更新 animateC 以便它只為一個 div 設定影片，但這可能會導致堆疊溢位（不確定來自影片中的遞回呼叫，可以使用 setTimeout，因此這可能是那里的解決方案）。

However, you probably just want the circle to go as soon as you click it, rather than when it's finished its current move, so you need to cancel the animation queue. In your case, via stop()

$(this).stop(true, false);

true, false will clear the queue, but not jump to the end (while .finish() will jump to the end)

Updated snippet - I've left in the jump to top just to show it working

//create circle

var widthHeight = 45;
var margin = 25;
var delta = widthHeight   margin;

let clicks = 0;

function createDiv(id, color) {
  let div = document.createElement('div');
  var currentTop = 0;
  var documentHeight = document.documentElement.clientHeight;
  var documentWidth = document.documentElement.clientWidth;
  div.setAttribute('class', id);
  if (color === undefined) {
    let colors = ['#35def2', '#35f242', '#b2f235', '#f2ad35', '#f24735', '#3554f2', '#8535f2', '#eb35f2', '#f2359b', '#f23547'];
    div.style.borderColor = colors[Math.floor(Math.random() * colors.length)];
  }
  else {
   div.style.borderColor = color; 
  }
  div.classList.add("circle");
  div.classList.add("animation");
  
  currentTop = Math.floor(Math.random() * documentHeight) - delta;
  currentLeft = Math.floor(Math.random() * documentWidth) - delta;
  
  var limitedTop = Math.max(margin * -1, currentTop);
  var limitedLeft = Math.max(margin * -1, currentLeft);

  div.style.top = limitedTop   "px";
  div.style.left = limitedLeft   "px";
  
  $(div).click(function() {
    $('#clicks').text(  clicks);            
    $(this)
        .stop(true, false)
        .animate({ top:0 }, 100)
        .fadeOut();
  });
  
  document.body.appendChild(div);
}
    
let i = 0;

const twoSecond = 2000;

createDiv(`circle${i}`);
setInterval(() => {
  i  = 1;
  //if (i>3) return;
  createDiv(`circle${i}`);
  animateC();
}, twoSecond);

//move

function makeNewPosition(){
    
    // Get viewport dimensions (remove the dimension of the div)
    var h = $(window).height() - 50;
    var w = $(window).width() - 50;
    
    var nh = Math.floor(Math.random() * h);
    var nw = Math.floor(Math.random() * w);
    
    return [nh,nw];    
    
}

function animateC(){
    var newq = makeNewPosition();
    var oldq = $('.circle').offset();
    var speed = calcSpeed([oldq.top, oldq.left], newq);
    
    $('.circle').animate({ top: newq[0], left: newq[1] }, speed, function(){
      animateC();        
    });
    
};

function calcSpeed(prev, next) {
    
    var x = Math.abs(prev[1] - next[1]);
    var y = Math.abs(prev[0] - next[0]);
    var greatest = x > y ? x : y;
    
    var speedModifier = 0.1;// control the speed here 

    var speed = Math.ceil(greatest/speedModifier);
    return speed;

}

.circle {
  width: 35px;
  height: 35px;
  border-radius: 35px;
  background-color: #ffffff;
  border: 3px solid #000;
  margin: 20px;
  position: absolute;
}

@keyframes Animation {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(.8);
  }
  100% {
    transform: scale(1);
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p id="clicks"></p>

轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/441171.html

標籤：javascript html jQuery css

上一篇：使用Jquery回圈顯示JSONP陣列

下一篇：如何在JQuery中使用hasClass并將類添加到找到的值？