Как постепенно исчезать изображения и текст (здесь текст связан с конкретным изображением) с помощью плагина цикла jQuery?
<div>
<div id= "box-slider" class=" blueboxcontent " >
<ul>
<li>
<div class="img-wrapper">
<img src="news_instyle_c2p.jpg" />
</div>
<div class="text-warpper">
<p>Some text here for image 1</p>
</div>
</li>
<li>
<div class="img-wrapper">
<img src="news_instyle3D.jpg"/>
</div>
<div class="text-warpper" >
<p>Some text here for image 2</p>
</div>
</li>
<li>
<div class="img-wrapper">
<img src="news_instyle.jpg"/>
</div>
<div class="text-warpper">
<p>Some text here for image 3 < /p>
</div>
</li>
</ul>
</div>
Вызов скрипта:
$( '#box-slider' ).cycle( {
fx: 'fade',
speed: 700,
timeout: 2000
});
CSS:
*{ margin:0; padding:0; }
box-slider{
width:250px;
float:left;
overflow:hidden;
}
box-slider ul li {
list-style:none;
float:left;
height:102px;
width: 396px;
}
box-slider ul li . img-wrapper {
width:132px;
float:left
}
box-slider ul li .text-warpper {
width:264px;
float:left
}
