在 mousemove 上调用一个函数

Question

在这里寻求帮助...目标是：

页面加载时，等待 5 秒，然后从父“gridResponsive”的子 div 列表中，选择一个随机子 div（标题为“grid-item”的其中之一，然后执行一个功能（淡入一个此随机选择的 div 中的子 div - 例如“悬停” div）。等待 3 秒，然后淡出子子 div（例如“悬停”），再等待 5 秒，然后重新开始此过程 - 例如选择另一个随机来自“gridResponsive”组的子 div - 例如另一个“grid-item”。

有什么想法吗？我似乎找不到有效的解决方案...

谢谢

请参阅下面的示例 HTML：

<div class="gridResponsive">
<div class="gridinner">
<div class="grid-sizer" style="width: 1px;"></div>
<div class="grid-item width3"><div class="hovered" style="display: none;"><a title="" href="#"><p>Hover Text</p></a></div><img src="assets/images/home/grid/01.jpg" class="grid-itemImage"></div>
<div class="grid-item width2"><div class="hovered" style="display: none;"><a title="" href="#"><p>Hover Text</p></a></div><img src="assets/images/home/grid/02.jpg" class="grid-itemImage"></div>
<div class="grid-item width1"><div class="hovered" style="display: none;"><a title="" href="#"><p>Hover Text</p></a></div><img src="assets/images/home/grid/03.jpg" class="grid-itemImage"></div>
</div>
</div>

Answer 1

我不完全确定我是否理解正确，但请看看这个解决方案：

HTML：

<div class="gridResponsive">
<div class="gridinner">
<div class="grid-sizer" style="width: 1px;"></div>
<div class="grid-item width3"><div class="hovered" style="display: none;"><p>Hover Text0</p></div>
<div class="grid-item width2"><div class="hovered" style="display: none;"><p>Hover Text1</p></div>
<div class="grid-item width1"><div class="hovered" style="display: none;"><p>Hover Text2</p></div>
</div>
</div>

JavaScript：

$(document).ready(function(){

    window.setTimeout(doMagic, 5000);
});

function doMagic(){
    var items = $('.grid-item').children('.hovered');
    var randomIndex = Math.floor(items.length * Math.random());
    var randomItem = items[randomIndex];
    $(randomItem).fadeIn().delay(3000).fadeOut();

    setTimeout(doMagic, 8000);
};

DEMO