En utilisant jQuery pour afficher/masquer les éléments de liste

Question

Tout cela est le code est ici: http://jsfiddle.net/yrgK8/

J'ai une section « nouvelles » qui se compose des éléments suivants:

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

Et je la suivant le code CSS (simple, juste à peu près la superposition li est au-dessus de l'autre avec le positionnement absolu):

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; } 

Et enfin, voici le code jQuery qui fait tout Happ en. Fondamentalement, ce qu'il fait est-il anime l'opacité d'un LI à 0, et anime alors l'opacité de la prochaine LI à 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 

Alors, quel est le problème? Le problème est qu'ils sont empilés les uns sur les autres. Cela fonctionne si les LI ne contiennent que du texte. Cependant, certains d'entre eux contiennent des liens. Cela devient un problème quand il y a un LI avec une opacité de 0 qui est empilé sur votre LI avec une opacité de 1 et qui contient un lien. Vous ne pouvez pas cliquer sur le lien.

Quelqu'un sait comment je peux résoudre ce problème?

Merci beaucoup,

Amit

Answer 1

Set z-index de l'élément actif à une valeur élevée, il sera au-dessus de tous, et des liens ne devrait pas être un problème plus.

Answer 2

Je pense que le réglage display:none à la fin de la transition permettrait de résoudre votre problème.

Cependant, il semble que ce serait préférable d'utiliser intégré dans jQuery .fadeOut(), puisque ce gérerait l'opacité ainsi que le réglage de la display-none.

Si vous ne voulez pas utiliser cela, vous devez définir display à none en utilisant css.

Answer 3

Essayez de définir l'index z de l'élément li en même temps que l'opacité est définie.