Using jQuery to show/hide list items

Question

Hi all,

All of this is code is here: http://jsfiddle.net/yrgK8/

I have a "news" section which is composed of the following:

<ul id="news">

      <li><p>asfdsadfdsafdsafdsafdsafdsafdsafdsa</p></li>
      <li><p><a href="http://google.com"&gt;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="&gt;" /></a></span>
                    <span id="newsLeft"><a href="#"><img src="http://engineercreativity.com/samples/einav/images/newsright.png" alt="&lt;" /></a></span>
                </div><!-- /#newsNav -->

And I have the following CSS code (simple, just pretty much overlay the li's on top of each other with 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; }

And finally, this is the jQuery code that makes it all happen. Basically what it does is it animates the opacity of one LI to 0, and then animates the opacity of the next LI 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

So what's the problem? The problem is that they're stacked on top of each other. This works if the LIs only contain text. However, some of them contain links. This becomes a problem when there's an LI with opacity of 0 that's stacked on top of your LI with opacity of 1 and which contains a link. You can't click the link.

Anyone know how I can fix this?

Thanks a lot,

Amit

Answer 1

Set z-index of active item to some high value, so it will be above them all, and links shouldn't be problem any more.

Answer 2

I would think setting display:none at the end of the transition would fix your problem.

However, it seems like it would be better to use jQuery's built-in .fadeOut(), since this would handle the opacity as well as setting the display to none.

If you don't want to use that, you should set display to none yourself using css.

Answer 3

Try setting the z-index of the li element at the same time as the opacity is being set.