个人中心
gpt4 book ai didi

javascript - 使用 dojo 淡入/淡出文本和循环

转载 作者：行者123 更新时间：2023-11-30 21:10:05 24 4
gpt4 key购买 nike

我的 html 模板有以下 div:

<div dojoAttachPoint="container" class="container">
        <span dojoAttachPoint="searchingForMore" id="searchingForMore" class="searchingForMore"></span>
    </div>

我还有一个功能，可以让我的两条文本同时淡入淡出。

_alternateSearchingProvText: function () {
    var node = dom.byId("searchingForMore");
    node.innerHTML = "first text";
    fx.fadeOut({
        node: node,
        duration: 60000,
        onEnd: function() {
            node.innerHTML = "Second text";
            dojo.fadeIn({
                node: node
            }).play()
        }
    }).play();

我想在循环中定期执行此操作，直到 View 从屏幕上消失。我如何实现这一点？

最佳答案

您可以简单地通过使用 setInterval js 函数来实现这一点，它会在每个指定时间(以毫秒为单位)触发动画，

所以如果你的动画持续时间是3s那么间隔的超时应该是2倍动画持续时间

您可以看到下面的工作片段，我在其中使用了 setInterval，并在最后一次对话框关闭时停止了这个片段(使用 clearInterval)。

require(["dijit/Dialog","dojo/_base/fx","dijit/registry","dojo/dom","dojo/ready","dijit/form/Button"],
	function(Dialog,fx,registry,dom,ready,Button){
    var interval;
    var duration = 4000;
    var text = "First text";
    var node;
    
	  ready(function(){
      registry.byId("btn").on("click",function(e){
          followUpDialog.show();
          annimation();
      });
      
      var dialogContent = ' <span dojoAttachPoint="searchingForMore" id="searchingForMore" class="searchingForMore"></span>';
      
      
      
      // instantiate new custom dialog
      var followUpDialog = new Dialog({
        id:'myDialog',
        title: "Create new follow-up",
        content: dialogContent,
        style: "width: 730px",
        onShow: function() {
          node = dom.byId("searchingForMore");
          
          node.innerHTML = text;
          interval = setInterval(function(){
            annimation();
            
          },duration*2)
        },
        onHide: function () {
          clearInterval(interval);
        }
      });
      
      function annimation() {
        text = text == "First text" ? "Second text" : "First text";
            
        fx.fadeOut({
            node: node,
            duration: duration,
            onEnd: function() {
              node.innerHTML = text;
              fx.fadeIn({
                node: node,
                duration: duration
              }).play();;
            }
        }).play();  
      }
    });
  }
);
<script type="text/javascript">
  dojoConfig = {isDebug: true, async: true, parseOnLoad: true}
</script>

<script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"></script>
<link href="//ajax.googleapis.com/ajax/libs/dojo/1.8.3/dijit/themes/claro/claro.css" rel="stylesheet"/>
<body class="claro">
  <div data-dojo-type="dijit/form/Button" id="btn"> click me </div>
</body>

关于javascript - 使用 dojo 淡入/淡出文本和循环，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46242529/

24 4 0
文章推荐： 无法从函数返回多个值
文章推荐： c - 在 C 中对具有交替位置的单词和数字的字符串进行排序
文章推荐： c# - .Net:导航到不同表单时维护表单 windowState
文章推荐： c++ - 需要澄清 'reverse (data, data+n)' 在这段代码中做了什么
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com