Question

我在右下角创建了这个弹出通知：

var count = 0;

for(i in myArray){
    if(myArray[i]["file"] != null)
        count++;
}

console.log(count);

以慢动画显示，5秒后由于SetTimout功能而消失：

<div class='personalise-notification' style=''>
  <div class='box'>
    <div style='display: table-row;'>

      <div class='message'>message</div>

    </div>
    <div id="borderBottom"></div>
  </div>
</div>

我创建了这个绝对div #borderBottom，目标是在Timeout从5000变为0时动态更改边框宽度：

$('.personalise-notification').show().animate({ right: '50'}, 'slow');

setTimeout(function(){ 
  $('.personalise-notification').animate({ bottom: '-200'}, 'slow').hide('slow');
}, 5000);

如果SetTimeout开始并且它是5000毫秒，则RIGHT属性应为0％...当时间进展为0时，RIGHT属性也将移至100％（反之亦然）

我怎么能听到setTimeout并根据这个显示borderBottom~指标？或者还有其他方法吗？

结果最终应该像这个通知一样： http://www.jqueryrain.com/?H40wqtcG

编辑：jsfiddle的错误网址 - 立即更新

Answer 1

$('#borderBottom').animate({width: 0}, 3000);

在SetTimeout函数之后添加此行代码。

动画时间与SetTimeout函数相同。

Answer 2

您可以添加CSS animation来执行以下操作，对于位于animation width底部的div，80%开始0，直至100%，您甚至可以将其设置为$('.personalise-notification').show().animate({ right: '50' }, 'slow'); setTimeout(function() { $('.personalise-notification').animate({ bottom: '-200' }, 'slow').hide('slow'); }, 3000);。

.personalise-notification {
  display: one;
  bottom: 20px;
  right: -200px;
  background-color: black;
  color: white;
  width: 350px;
  position: fixed;
}

.message {
  display: table-cell;
  vertical-align: middle;
  padding: 15px 15px 15px 0;
}

.box {
  display: table;
}

#borderBottom {
  position: absolute;
  right: 24%;
  left: 0;
  width: 80%;
  height: 2px;
  background: #f51c40;
  animation: brd 3s ease forwards;
}

@keyframes brd {
  from {
    width: 80%;
  }
  to {
    width: 0%;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='personalise-notification'>
  <div class='box'>
    <div style='display: table-row;'>

      <div class='message'>message</div>

    </div>
    <div id="borderBottom"></div>
  </div>
</div>

java.lang.IndexOutOfBoundsException: Index: 2, Size: 1
at java.util.ArrayList.rangeCheckForAdd(ArrayList.java:661)
at java.util.ArrayList.add(ArrayList.java:473)
at com.codename1.ui.Container.insertComponentAtImpl(Container.java:629)
at com.codename1.ui.Container$1.updateState(Container.java:596)
at com.codename1.ui.animations.ComponentAnimation.updateAnimationState(ComponentAnimation.java:95)
at com.codename1.ui.AnimationManager.updateAnimations(AnimationManager.java:69)
at com.codename1.ui.Form.repaintAnimations(Form.java:1373)
at com.codename1.ui.Display.edtLoopImpl(Display.java:1080)
at com.codename1.ui.Display.mainEDTLoop(Display.java:997)
at com.codename1.ui.RunnableWrapper.run(RunnableWrapper.java:120)
at com.codename1.impl.CodenameOneThread.run(CodenameOneThread.java:176)

Answer 3

使用jQuery你真的不需要setTimeout 您可以使用delay()函数作为等待时间，使用callback函数作为#borderBottom位置。

这样，两者（通知对话框和边框底部）将及时同步。

// Set waiting time
var waitingTime = 5000;

$('.personalise-notification')
.show()
.animate({
    right: '50'
}, 'slow', function() { // callback to animate borderBottom
    $('#borderBottom').animate({
        right: '100%'
    }, waitingTime);
})
.delay(waitingTime) // like setTimeout
.animate({
    bottom: '-200'
}, 'slow')
.hide('slow');

＆＃13;

// Set waiting time
var waitingTime = 5000;

$('.personalise-notification')
    .show()
    .animate({
        right: '50'
    }, 'slow', function() {
        $('#borderBottom').animate({
            right: '100%'
        }, waitingTime);
    })
    .delay(waitingTime)
    .animate({
        bottom: '-200'
    }, 'slow')
    .hide('slow');

＆＃13;

.personalise-notification {
    display: none;
    bottom: 20px;
    right: -200px;
    background-color: black;
    color: white;
    width: 350px;
    position: fixed;
}
.message {
    display: table-cell;
    vertical-align: middle;
    padding: 15px 15px 15px 0;
}
.box {
    display: table;
}
#borderBottom {
    border-bottom: 2px solid #f51c40;
    position: absolute;
    right: 0%;
    left: 0;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='personalise-notification'>
    <div class='box'>
        <div style='display: table-row;'>
            <div class='message'>message</div>
        </div>
        <div id="borderBottom"></div>
    </div>
</div>

＆＃13;

侦听SetTimeout以同步加载时间

3 个答案: