Using jquery to move a div when slides change
<p>I have a small rectangular link box whose position I want to change when a slide changes in a slideshow.</p>

<p>The opacity of the slide in focus changes to 1, so I'm trying to check that and change the CSS of the box accordingly, but this doesn't work exclusively for the slide in the foreground, i.e. the new CSS is applied for all slides.</p>

<p>Here is my attempt:</p>

<pre><code>&lt;div id="slideshow"&gt;
    &lt;ul id="nav"&gt;
        &lt;li id="prev"&gt;&lt;a href="#"&gt;Previous&lt;/a&gt;&lt;/li&gt;
        &lt;li id="next"&gt;&lt;a href="#"&gt;Next&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
    &lt;ul id="slides"&gt;
        &lt;li style="position: absolute; top: 0px; z-index: 3; opacity: 0; display: none; "&gt;&lt;img src="image1.png" /&gt;&lt;/li&gt;
        &lt;li style="position: absolute; top: 0px; z-index: 3; opacity: 1; display: none; "&gt;&lt;img src="image2.png" /&gt;&lt;/li&gt;
        &lt;li style="position: absolute; top: 0px; z-index: 3; opacity: 0; display: none; "&gt;&lt;img src="image3.png" /&gt;&lt;/li&gt;
    &lt;/ul&gt;
 &lt;a class="rectangle" style="top: 282px; left: 723px; width: 170px; height: 40px;" href="#"&gt;&lt;/a&gt;
&lt;/div&gt;



&lt;script type="text/javascript"&gt;
$("#slides li").each(function() {
    if($(this).css("opacity")==1){
       $(".rectangle").css("top","200px");
}
});
&lt;/script&gt;
</code></pre>

<p>What is the correct way to ensure that the box moves only in accordance with the slide which has <code>li style="opacity:1;"</code>?</p>

<p><strong>EDIT:</strong> I am using the jquery cycle plugin <a href="http://jquery.malsup.com/cycle/" rel="nofollow">http://jquery.malsup.com/cycle/</a></p>
