To view all the code, click on this link: http://jsfiddle.net/yrgK8/
A section titled "news" is included in the code snippet below:
<ul id="news">
<li><p>asfdsadfdsafdsafdsafdsafdsafdsafdsa</p></li>
<li><p><a href="http://google.com">google.com link</a</p></li>
</ul>
<div id="newsNav">
<span id="newsRight"><a href="#"><img src="http://engineercreativity.com/samples/einav/images/newsleft.png" alt=">" /></a></span>
<span id="newsLeft"><a href="#"><img src="http://engineercreativity.com/samples/einav/images/newsright.png" alt="<" /></a></span>
</div><!-- /#newsNav -->
Additionally, a simple CSS code is provided to overlay the list items by using absolute positioning:
ul#news { list-style-type: none; position:relative; height:101px; color: black; }
ul#news > li { font-size: 11px; margin: 10px; margin-right: 15px; position: absolute; top: 0; right:0; opacity: 0; filter:alpha(opacity=0); color: black; }
The jQuery code given below controls the animation of the list items. It transitions one LI element's opacity to 0 and then changes the next LI element's opacity to 1:
$('ul#news li:first').addClass('active').addClass('firstNews');
$('ul#news > li').css({opacity:0.0}).filter('ul#news li.firstNews').css({opacity:1.0});
$('#newsLeft').click(function() {
var $active = $('ul#news li.active');
var $next = $active.next().length ? $active.next() : $('ul#news li.firstNews');
$active.animate({opacity:0.0}, 300, function() {
//when done animating out, animate next in
$next.css({opacity:0.0})
.animate({opacity: 1.0}, 400, function() {
$active.removeClass('active');
$next.addClass('active');
});
});
return false;
}); //clickRight
$('#newsRight').click(function() {
var $active = $('ul#news li.active');
var $previous = $active.prev().length ? $active.prev() : $('ul#news li.firstNews');
$active.animate({opacity:0.0}, 300, function() {
//when done animating out, animate next in
$previous.css({opacity:0.0})
.animate({opacity: 1.0}, 400, function() {
$active.removeClass('active');
$previous.addClass('active');
});
});
return false;
}); //clickRight
An issue arises when the LI elements are stacked on top of each other with varying opacities. This creates an obstacle when trying to interact with links within specific LIs. Any suggestions on how to resolve this problem would be greatly appreciated.
Thank you,
Amit