0

HTML

 <div class="cycle-slideshow" id="cycle-1" style="float:left;" 
   data-cycle-fx=scrollHorz 
   data-cycle-timeout=3000 >

 <img src="./responsive/img/java1.gif">
 <img src="./responsive/img/java2.gif">
 <img id="trigger" src="./responsive/img/clown.gif">
 <img src="./responsive/img/java4.gif">
 </div>

<div id="target" style="position:absolute;top:50px;left:350px">
        <img src="./responsive/img/java5.gif">  
</div>

The slideshow works. I want to hide the static image (id="target") when the clown image is active in the slider and make it visible again when any other image is active in the slider

the jQuery function is something like this when clown image is active:

$('#target').css('visibility','hidden');

I did a JsFiddle: http://jsfiddle.net/mapsylno/nA9Yx/4/

Maps Ylno
  • 33
  • 6
  • finally found easy and dirty solution: using hasClass function in an indefinite loop. see JsFiddle update: http://jsfiddle.net/mapsylno/nA9Yx/5/ – Maps Ylno Jun 08 '14 at 10:53

1 Answers1

0

Take a look at:

Fire jQuery event on div change

You could have a div change event on cycle-1 , check which image is being displayed in it's handler and toggle the css on the target image accordingly.

This won't work on IE as is explained in the answer I've pointed you to.

Community
  • 1
  • 1
aa333
  • 2,556
  • 16
  • 23