如何在事件发生时使内容消失

Question

我使用以下脚本进行侧面板折叠：

<script>

$(document).ready(function(){
$('.collaps').addClass('collaps_on');
  var showFlag=1
  $('.collaps').click(function() {
   if(showFlag==1){
     $('#adminmenuback').animate({width:"5%"});
     $('.three-fourth').animate({width:"93%"});
       $('ul.admin-menu li a').addClass("newgradient");

     if($('.collaps').hasClass("collaps_on") ){
        $('.collaps').addClass("collaps_off");
        $('.collaps').removeClass("collaps_on");

     }
     else{
     $('.collaps').addClass("collaps_on");
     $('.collaps').removeClass("collaps_off");

     }

      showFlag=0;
   }else{
   $('ul.admin-menu li a').removeClass("newgradient");
     $('#adminmenuback').animate({width:"17%"});
     $('.three-fourth').animate({width:"81%"});

             if($('.collaps').hasClass("collaps_off") ){
        $('.collaps').addClass("collaps_on");
        $('.collaps').removeClass("collaps_off");

     }
     else{
     $('.collaps').addClass("collaps_off");
     $('.collaps').removeClass("collaps_on");

     }

    showFlag=1;
   }     
  });
});

</script>

侧面板的html如下所示：

<section class="one-fourth" id="adminmenuback">
    <ul class="admin-menu">

    <li><a href="#" class="collaps">button</a></li>
    <li><a href="#"> <span class="home"></span>Dashboard </a></li>
    <li><a href="#"> <span class="home"></span>Dashboard </a></li>

    </ul>


</section>

它的工作很好，唯一的事情是，我想要的名称的链接(例如。当我将侧面板(#adminmenuback)的宽度(#adminmenuback)压缩到5%时，它会消失。这是jsfiddle：http://jsfiddle.net/kF38Q/预先感谢

Answer 1

给你想要消失的项目一个id，然后用$('#idOfObject').fadeOut()隐藏它。

如果希望它们重新出现，请使用$('#idOfObject').fadeIn()

Answer 2

如果我没有理解正确的话，很抱歉。但您可以在动画完成后添加一个新函数来删除链接的文本：

$('#adminmenuback').animate({width:"5%"}, function(){
          $('#adminmenuback a').text('');
        }

如果你将overflow: hidden添加到#adminmenuback，那么文本将根据宽度消失。