检测使用 javascript 动态分配的 css 样式/属性

Question

我正在使用 Jquery Cycle 插件进行幻灯片放映，并且我想在某个幻灯片处于活动状态时添加一个事件。 Cycle 插件通过在某个 div 中添加和删除图像的不透明度来实现这一点，如下所示：

<div style="position: absolute; top: 0px; z-index: 9; display: none; opacity: 0;">

当图像处于活动状态，或者是当前幻灯片时，不透明度变为 1，显示为“块”。

现在我尝试使用不同的方法，从检测 div 的 css 样式/属性到为所述 div 分配一个类，然后做一些事情：

if($("#slideshow > div:nth-child(2)").hasClass('fadeOut') == 1) {
    alert('Hello');
}

或

if($("#slideshow > div:nth-child(2)").css('opacity') == 1) {
    alert('Hello');
}

甚至

if($(".fadeOut").css('opacity') == 1) {
    alert('Hello');
}

问题是当使用 Cycle 插件动态应用时，JS 没有检测到“opacity: 1”样式。另一方面，当样式在css文件中内联应用时，它确实有效，当然，这不起作用，因为事件在页面加载的那一刻触发，我想要的是事件在何时触发并且仅当第二张图像是活动图像时，换句话说，当它的“不透明度”设置为 1 或“显示”设置为阻止，并且似乎无法弄清楚时。

Answer 1

您应该能够使用所有方法确定元素的当前状态。我想问题是在正确的时间查找它们。

只是：您无法检测到样式属性或类属性何时发生变化。唯一的方法就是收听DOMModification events——这是一种相当丑陋的方式。

所以：使用另一个插件。将有幻灯片插件在更改图像时触发元素上的 [自定义] 事件。

Answer 2

这样的东西对你有用吗？

html

<p></p>
<div class="slideshow">
    <img id="1" src="http://davealger.info/i/1.jpg" />
    <img id="2" src="http://davealger.info/i/2.bmp" />
    <img id="3" src="http://davealger.info/i/3.png" />
</div>

css

.slideshow { position:relative; }
.slideshow img { position:absolute; left:0; top:0; }​

js

$(function(){
    $('.slideshow img:gt(0)').hide();
    setInterval(function(){
        var me=$('.slideshow :first-child');

        if ( me.attr('id') === '1' )
            $("p:last").html('getting ready to load slide 2');
        else
            $("p:last").html('');

        me.fadeOut(2000).next('img').fadeIn(2000).end().appendTo('.slideshow');
    }, 4000);
});​

下面的演示链接

http://jsfiddle.net/DaveAlger/CWkYt/