我正在尝试迭代一个数组,在一个通知中按顺序显示每个项目:
此外,鼠标悬停时,通知应保留在屏幕上,并在鼠标移出时隐藏(在第二次延迟后)。
我有以下问题:
https://jsfiddle.net/3905wogc/1/
$(function() {
var delay = 3000,
interval = 8000,
$el = $('#notification'),
data = [{
id: 1,
content: 'First Notification'
},
{
id: 2,
content: 'Second Notification'
},
{
id: 3,
content: 'Third Notification'
}];
$.each(data, function (i, item) {
console.log (item);
// add the content to the html
$el.html(item.content);
$el.addClass('in');
$el.one('webkitAnimationEnd oanimationend msAnimationEnd animationend', function(e) {
// animate in complete
console.log('in complete', i);
// add delay before slide out
$el.removeClass('in').addClass('out');
$el.one('webkitAnimationEnd oanimationend msAnimationEnd animationend', function(e) {
// animate out complete
console.log('out complete', i);
// add interval before next slide in
});
});
});
$el.on('mouseover', function () {
// pause the animation
});
$el.on('mouseout', function () {
// resume the animation
});
});
答案 0 :(得分:1)
这是Demo
var delay = 3000,
interval = 8000 + delay,
$el = $('#notification'),
data = [{
id: 1,
content: 'First Notification'
},
{
id: 2,
content: 'Second Notification'
},
{
id: 3,
content: 'Third Notification'
}],
currentItem = 0 ,
timeoutTrack ,
intervalTrack;
showNextOne();
var intervalTrack = setInterval(function(){showNextOne();},interval);
function showNextOne()
{
$el.html(data[currentItem].content).addClass("in");
timeoutTrack = setTimeout(function()
{
$el.removeClass("in").addClass("out");
setTimeout(function(){$el.removeClass("out");},1500);
},delay);
if(currentItem +1 >= data.length)
currentItem = 0;
else
currentItem++;
}
$el.on("mouseenter",function()
{
if(timeoutTrack)
clearTimeout(timeoutTrack);
if(intervalTrack)
clearInterval(intervalTrack);
});
$el.on("mouseleave",function()
{
timeoutTrack = setTimeout(function()
{
$el.removeClass("in").addClass("out");
setTimeout(function(){$el.removeClass("out");},1500);
},delay);
intervalTrack = setInterval(function(){showNextOne();},interval);
});