仅当侧边栏完全展开时显示文本

Show text only if sidebar fully expands

本文关键字：显示 文本 侧边栏      更新时间：2023-09-26

我有一个侧边栏，当鼠标悬停在它上面时，它会展开。一旦它展开，我希望文本出现。当我不再将鼠标悬停在侧边栏上时，我希望文本消失。这很简单，除了一个我遇到麻烦的情况。

问题：正如我目前所配置的，如果我随意地将鼠标悬停在侧边栏上，但在侧边栏展开之前退出，文本就会出现在折叠的侧边栏中。这是一个小麻烦，但我想知道是否有一种方法只在栏完全展开后才显示文本。我想我可能可以使用.on()事件来观察侧边栏扩展到其完整大小，但这似乎不必要地沉重（也许我错了）。

不管怎样，这是我的密码。如有任何提示，我们将不胜感激。

$('div#sidebar-wrapper div#logospace span#nus').hide();
$("div#sidebar-wrapper").mouseenter(function() {
  $(this).animate({
    left: 0
  });
  $('div#sidebar-wrapper div#logospace span#nus').delay(800).fadeIn(500);
});
$('div#sidebar-wrapper').mouseleave(function() {
  $('div#sidebar-wrapper div#logospace span#nus').fadeOut(500);
  $(this).animate({
    left: -127
  });
});
span#nus {
  color: #38353D;
}
#sidebar-wrapper {
  // background-image: url("/assets/homebg.png");
  background: #2DBE60;
  // margin-left: -150px;
  /*     left: 70px; */
  width: 180px;
  position: fixed;
  height: 100%;
  z-index: 10000;
  transition: all .4s ease 0s;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  overflow: hidden
}
#sidebar_menu li a,
.sidebar-nav li a {
  color: #ddd;
  // display: block;
  text-decoration: none;
  width: 170px;
  border-bottom: 1px solid #1A1A1A;
  -webkit-transition: background .5s;
  -moz-transition: background .5s;
  -o-transition: background .5s;
  -ms-transition: background .5s;
  transition: background .5s;
}
.sidebar-nav li a:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.2);
  text-decoration: none;
}
#sidebar-wrapper div#logospace {
  margin-top: 15px;
}
div#sidebar-wrapper div#logospace {
  height: 60px;
}
div#sidebar-wrapper div#logospace img {
  position: fixed;
  left: 0px;
  margin-left: 8px;
  width: 35px;
}
#sidebar-wrapper div#logospace span#nus {
  // visibility: hidden;
  font-size: 40pt;
  font-weight: bold;
  left: 46px;
  position: absolute;
  top: 12px;
}
#sidebar-wrapper a.link {
  left: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="sidebar-wrapper" class="dashboard" style="left: -127px;">
  <div id="logospace">
    <img src="/assets/initial.svg">
    <span id="nus" style="display: none;">Appear</span>
  </div>
</div>

您可以在动画完成后显示注释

$('div#sidebar-wrapper div#logospace span#nus').hide();
$("div#sidebar-wrapper").hover(function() {
  $(this).animate({
    left: 0
  }, function(){
    $('div#sidebar-wrapper div#logospace span#nus').clearQueue()
.stop().delay(800).fadeIn(500);
  });
  
}, function(){
 $('div#sidebar-wrapper div#logospace span#nus').clearQueue()
.stop().fadeOut(500);
  
  $(this).animate({
    left: -127
  });
   });
span#nus {
  color: #38353D;
}
#sidebar-wrapper {
  // background-image: url("/assets/homebg.png");
  background: #2DBE60;
  // margin-left: -150px;
  /*     left: 70px; */
  width: 180px;
  position: fixed;
  height: 100%;
  z-index: 10000;
  transition: all .4s ease 0s;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  overflow: hidden
}
#sidebar_menu li a,
.sidebar-nav li a {
  color: #ddd;
  // display: block;
  text-decoration: none;
  width: 170px;
  border-bottom: 1px solid #1A1A1A;
  -webkit-transition: background .5s;
  -moz-transition: background .5s;
  -o-transition: background .5s;
  -ms-transition: background .5s;
  transition: background .5s;
}
.sidebar-nav li a:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.2);
  text-decoration: none;
}
#sidebar-wrapper div#logospace {
  margin-top: 15px;
}
div#sidebar-wrapper div#logospace {
  height: 60px;
}
div#sidebar-wrapper div#logospace img {
  position: fixed;
  left: 0px;
  margin-left: 8px;
  width: 35px;
}
#sidebar-wrapper div#logospace span#nus {
  // visibility: hidden;
  font-size: 40pt;
  font-weight: bold;
  left: 46px;
  position: absolute;
  top: 12px;
}
#sidebar-wrapper a.link {
  left: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="sidebar-wrapper" class="dashboard" style="left: -127px;">
  <div id="logospace">
    <img src="/assets/initial.svg">
    <span id="nus" style="display: none;">Appear</span>
  </div>
</div>

.animate()有几个可用的回调函数。这意味着您可以在动画完成后、期间甚至之前执行代码。有关详细信息，请查看.jquery文档中的.animate（）。

我会这样写你的代码：

$('div#sidebar-wrapper div#logospace span#nus').hide();
$("div#sidebar-wrapper").mouseenter(function() {
  $(this).stop().animate({
    left: 0
  }, function() {
    $('div#sidebar-wrapper div#logospace span#nus').fadeIn();
  });
});
$('div#sidebar-wrapper').mouseleave(function() {
  $(this).stop().animate({
    left: -127
  }, function() {
    $('div#sidebar-wrapper div#logospace span#nus').fadeOut();
  });
});

小提琴

相关文章：