JQuery允许div在5秒后消失，然后在10秒后创建新的div，但是如果单击div，它会立即消失

ltskdhd1 于 2023-02-03 发布在 jQuery

关注(0)|答案(1)|浏览(113)

我正在做一个项目在angular大学和我的问题是如下：
我需要编码一个足球这是消失和重新出现在网站上。它应该每10秒出现一次，并在5秒内可见。如果你点击足球，它应该立即消失（并添加5金帐户余额）。
我已经在OnInit方法中有了这段代码：

setInterval(() => {
      if($('.football').is(":visible")) {
        $('.football').fadeOut('fast')
      } else {
        this.placeRandomDiv();
        console.log($('#minigame-window').position(), this.windowSize.windowHeight);
        $('.football').fadeIn('fast');
      }
    }, 10000)

这使得足球每10秒出现一次。我试着添加延迟，但点击它后足球并没有消失。我也试着在if和else中添加单独的setIntervals，但没有任何效果。
我的HTML文件看起来像这样：

<div id="minigame-window" class="card-body" style="height: 65vh;">
    <form (ngSubmit)="addCredits(userId, amount)">
      <div class="football rotate90" [(ngModel)]="amount" [ngModelOptions]="{standalone: true}" (click)="addCredits(userId, amount)">
        <img src="assets/football-157930_640.png" class="rotate90" height="80px" width="80px">
      </div>
    </form>
  </div>

我很感激你的帮助！

jquery

来源：https://stackoverflow.com/questions/75283917/jquery-let-a-div-disappear-after-5-seconds-and-then-create-new-div-after-10-seco

1条答案

按热度按时间

fwzugrvs1#

我觉得你想要这样的东西：

setTimeout(function () {
      $('.football').fadeOut('fast');
      setTimeout(function () {
        this.placeRandomDiv();
        console.log(
          $('#minigame-window').position(),
          this.windowSize.windowHeight
        );
        $('.football').fadeIn('fast');
      }, 10000);
    }, 5000);

    $('.football').click(function () {
      $('.football').fadeOut('fast');
    });

但是您不应该将jquery与Angular 项目一起使用，您最好使用TypeScript
下面是TypeScript中的等效代码：

setTimeout(() => {
  document.querySelector('.football')!.style.opacity = '0';
  setTimeout(() => {
    this.placeRandomDiv();
    console.log(
      (document.querySelector('#minigame-window') as HTMLElement).getBoundingClientRect().top,
      this.windowSize.windowHeight
    );
    document.querySelector('.football')!.style.opacity = '1';
  }, 10000);
}, 5000);

document.querySelector('.football')!.addEventListener('click', () => {
  document.querySelector('.football')!.style.opacity = '0';
});

赞(0）回复(0）举报 2023-02-03

我来回答

JQuery允许div在5秒后消失，然后在10秒后创建新的div，但是如果单击div，它会立即消失

1条答案

相关问题

热门标签

最新问答