Применить стиль CSS к проблеме привязки

Question

Использование jquery У меня есть механизм щелчковых вкладок, которые являются ничем иным, как якорными тегами, которые возвращают false , но вызывают функции javascript для запуска некоторых событий на странице. Проблема в том, что я использую jquery для применения стиля непрозрачности к активной привязке. и другой якорь брата получает меньшую прозрачность. Мой код выглядит так

$("#menutab li a").click(function(){
 $(this).animate({opacity:'1'},1000);
  $(this).siblings().animate({opacity:'.25'},1000);
}

Я бы подумал, что этот код будет действовать только на элемент, по которому щелкнули, и применить этот стиль CSS к этому элементу, а другой стиль - к другим тегам привязки, кроме кликаемого. Это своего рода делает это, но также и то, что он оставляет ранее выбранный элемент равным opacity = 1, поэтому, если я щелкаю элемент, он устанавливает его непрозрачность равным 1, а затем, если я щелкаю другой элемент, он устанавливает его непрозрачность равным 1, оставляя ранее щелкнул один к 1 также вместо того, чтобы установить это к .25 как другие.

Edit: Я изменил код выше:

$("#menutab ul li").click(function(){
 $(this).children().animate({opacity:'1'},1000);
  $(this).siblings().children().animate({opacity:'.25'},1000);
});

и теперь я получаю желаемый эффект, за исключением того, что при нажатии первой привязки в списке не соблюдаются правила события. При нажатии первой, как будто, событие клика не вызывается, потому что нет прозрачности изменения стиля. чего я не понимаю.

Answer 1

Это прекрасно работает для меня, даже если щелкнуть первый якорь в списке:

<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>

<script type="text/javascript">
$(document).ready(function() {
    $("#menutab ul li").click(function(){
     $(this).children().animate({opacity:'1'},1000);
      $(this).siblings().children().animate({opacity:'.25'},1000);
    });
});

</script>   
<div id="menutab">
    <ul>
        <li><a href="javascript: return false;" >Test1</a></li>
        <li><a href="javascript: return false;" >Test2</a></li>
        <li><a href="javascript: return false;" >Test3</a></li>
        <li><a href="javascript: return false;" >Test4</a></li>
        <li><a href="javascript: return false;" >Test5</a></li>
    </ul>
</div>

Answer 2

Добавить .stop() вызовы до обоих .animate().