代码之家 › 专栏 › 技术社区 › CommittedEel

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

dojo javascript

CommittedEel · 技术社区 · 7 年前

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

1 回复 | 直到 7 年前

Bourbia Brahim 7 年前

只需使用 setInterval js函数,每指定时间(毫秒)触发一次消息,

所以,如果你的信息持续时间是 3s 因此,间隔的超时应为 2 times

您可以看到下面的工作片段,其中我使用了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>