Question

希望这是有道理的。

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

测试我个人网站的新版本

我希望使用jQuery以一种交互式方式显示我的作品。

您可以看到每张图片都不匹配，但它有一个旋转器。并且您可以将每个图像旋转到所有三个图像。当这三个人排成一列时，我想淡出一个解释该项目是什么的div。

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

我对jQuery很陌生，而且我只是理论上如何理解这一点。有什么想法吗？

Answer 1

我在阅读你的问题之前就去了你的网站，尽管我喜欢玩旋转功能来排列图像，但是如果没有阅读你的解释，那么它实际上会在某个地方显得非常明显。

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

$('#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.
        }
    }
}

请注意，我提出了三种实际更改页面的方法，您可能希望选择自己喜欢的内容。

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

1 个答案: