javascript - jquery - 仅对单击的元素进行动画处理并隐藏另一个元素

Question

我正在尝试创建一个菜单。单击菜单元素时，我想为其边框底部的宽度设置动画。我的问题是，当单击另一个元素时，我找不到如何将 border-bottom 宽度设置为“0”的方法。

有什么解决办法吗？

$("#hww, #proj, #digi, #cont").click(function(){
	
	$( this ).animate({
			
			borderBottomWidth: "10px",
			}, 200 );
			
			
});

.menu_text {
	
	opacity: 1;
	font-size: 20px;

	margin-right: 100px;
	
	padding-left: 0px;
	cursor: pointer;
	border: 0px solid black;
	border-bottom: 1px solid rgba(0,0,0,0.5);
	border-bottom-width: 0px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div id="menu_bar">
  <div id="menu_box">
  <div id="cont" class="menu_text">CONTACT</div>
  <div id="digi" class="menu_text">DIGITAL SERVICES</div>
	
	<div id="proj" class="menu_text">PROJECTS</div>
	<div id="hww" class="menu_text">HOW WE WORK</div>
	
  </div>
</div> 

Answer 1

您可以在变量中保留对所有元素的引用并将它们设置为 0。

var menu = $("#hww, #proj, #digi, #cont").click(function() {
  
  // remove from previous element
  menu.not(this).animate({
    borderBottomWidth: 0
  }, 200);

  // show on current
  $(this).animate({
    borderBottomWidth: "10px",
  }, 200);


});

.menu_text {
  opacity: 1;
  font-size: 20px;
  margin-right: 100px;
  padding-left: 0px;
  cursor: pointer;
  border: 0px solid black;
  border-bottom: 1px solid rgba(0, 0, 0, 0.5);
  border-bottom-width: 0px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div id="menu_bar">
  <div id="menu_box">
    <div id="cont" class="menu_text">CONTACT</div>
    <div id="digi" class="menu_text">DIGITAL SERVICES</div>

    <div id="proj" class="menu_text">PROJECTS</div>
    <div id="hww" class="menu_text">HOW WE WORK</div>

  </div>
</div>

---

不过，更好的解决方案是通过 CSS 处理一切

$("#menu_box").on('click', '.menu_text', function(e){
   $(this).addClass('active').siblings().removeClass('active');
});

.menu_text {
  opacity: 1;
  font-size: 20px;
  margin-right: 100px;
  padding-left: 0px;
  cursor: pointer;
  border: 0px solid black;
  border-bottom: 1px solid rgba(0, 0, 0, 0.5);
  border-bottom-width: 0px;
  
  transition: border-bottom-width 200ms;
}

.menu_text.active{
  border-bottom-width:10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div id="menu_bar">
  <div id="menu_box">
    <div id="cont" class="menu_text">CONTACT</div>
    <div id="digi" class="menu_text">DIGITAL SERVICES</div>

    <div id="proj" class="menu_text">PROJECTS</div>
    <div id="hww" class="menu_text">HOW WE WORK</div>

  </div>
</div>