javascript - 将焦点设置在延迟后显示的元素上

Question

我正在尝试在我添加到我的网站的 slider 上获得可访问性效果。基本上我想要做的是，当您在第一张幻灯片上单击(按 Enter)时，您将焦点放在第二张幻灯片元素上，以便您可以继续在页面中切换。我正在使用 jquery 和循环插件。

问题是:当你点击第一个元素时，第二个元素仍然被js认为是display:none，所以无法到达。知道我该怎么做吗？我认为它应该足够简单，但我尝试了几种可能性并没有成功。

这是我的 jsfiddle:http://jsfiddle.net/toplefty/nk4bgsfx/以及我的尝试:

$('#s1').cycle({ 
    fx:     'slideY', 
    speed:  300, 
    next:   '#s1', 
    timeout: 0 
});


$('#Goto2').on('click', function() {
    $(this).parents('#s1').find('#Goto1').focus();
});

循环选项:http://jquery.malsup.com/cycle/options.html

Answer 1

after 属性接受一个在转换发生后执行的函数。

来自 after 的文档:

// transition callback (scope set to element that was shown): function(currSlideElement, nextSlideElement, options, forwardFlag)

所以你可以把焦点放在那里。 http://jsfiddle.net/gy8p5ewv/1/