Обнаруживать стиль/атрибут css, созданный динамически с помощью javascript

Question

Привет, я использую плагин Jquery Cycle для слайд-шоу, и я хочу добавить событие, когда определенный слайд активен. Плагин цикла достигает этого путем добавления и удаления непрозрачности изображений в определенном DIV как так:

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

Когда изображение является активным, или текущим слайд, непрозрачность меняется на 1, и дисплей «блок».

Теперь я попытался с помощью различных подходов, из определения стилей 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'); 
} 

проблема заключается в том, что JS не обнаруживает «непрозрачность: 1» стиль, когда это динамически применяется с плагином цикла. С другой стороны, он работает, когда стиль применяется inline в файле css, и, конечно же, это не работает, потому что событие срабатывает в тот момент, когда страница загружается, когда я хочу, чтобы событие срабатывало, когда и только когда второе изображение является активным, другими словами, когда у него есть либо «непрозрачность», установленная на 1, либо «отображение» для блокировки, и, похоже, не может понять это. Любая помощь приветствуется.

Answer 1

Вы должны быть способны определить текущее состояние элемента со всеми вашими подходами. Я думаю, проблема в том, чтобы найти их в нужное время.

Just: Вы не можете определить, когда изменяется свойство стиля или атрибут класса. Единственный способ поймать то, что слушает 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/