Question

我的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();

我想在循环中定期执行此操作，直到视图从屏幕中解除。我如何实现这一目标？

Answer 1

你可以通过使用setInterval js函数来实现这一点，它会在每个指定的时间（以毫秒为单位）触发一个动画，

因此，如果您的动画持续时间为3s，那么间隔的超时应为2 times动画dration

您可以在下面的工作片段中看到我使用了setInterval，并在关闭对话框后停止了这一操作（使用clearInterval）。

＆＃13;

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();  
      }
    });
  }
);

＆＃13;

<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>

＆＃13;

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

1 个答案: