当3个特定元素可见时触发jQuery事件

Question

这里希望这是有道理的。

我在http://joshuacody.net/jc3/

我期待在一点点的互动样式，以显示我的作品，使用jQuery测试我的个人网站的一个新版本。

你可以看到每个图像都是不匹配的，但它有一个旋转器。你可以旋转每个图像以排成三列。当所有三个人排队时，我想淡出一个div来解释那个项目是什么。

我正在使用该插件来旋转我的图像（http://www.malsup.com/jquery/cycle/），如果这有帮助。

我是jQuery的新手，我只是一个理论上如何做到这一点的头发。有任何想法吗？

Answer 1

我去你的网站阅读你的问题之前并不亚于我喜欢与旋转功能，排队玩的图像，作为一个接口，真正去某个地方，这是不明显的不读你的解释。

您需要在演示中使用事件或回调described。 after:参数是您真正需要的。我将首先填写您的alt属性，并对所有匹配的插槽图片进行相同的描述。然后后功能会看起来像：

$('#slot_1').cycle({ 
    fx: 'scrollVert', 
    next: '.scroll_up_1', 
    prev: '.scroll_down_1', 
    after: onAfter, 
    timeout: 0 
}); // Duplicate the after param on all 3 slots. 
function onAfter(){ 
    var alt = $('#slot_1 img:visible').attr('alt'); 
    if (alt == $('#slot_2 img:visible').attr('alt') && 
     alt == $('#slot_3 img:visible').attr('alt')) { 
     switch (alt) { 
     case 'Critical Reason?': 
      $('#linkToWork1').click(); //a hidden link? 
     break; 
     case 'CFCC Labs': 
      document.location = 'http://url/to/work/2'; 
     break; 
     case 'Tailgate': 
      $('#formActionWork3').submit(); 
     break; 
     default: 
     //oops. 
     } 
    } 
} 

注意，我把三种方式实际更改的页面，你可能会想挑选自己喜欢的。