Question

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

在页面加载时，等待5秒，然后从父级“gridResponsive”的子div列表中，选择一个随机的子div（其中一个名为“grid-item”，然后执行一个函数（淡入一个在这个随机选择的div中的子div - 例如“hovered”div。等待3秒，然后淡出孩子div（例如“hovered”），再等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

在mousemove上调用一个函数

1 个答案: