Question

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

问题：正如我目前配置的那样，如果我随便鼠标悬停在侧边栏上但在侧边栏展开之前退出，则文本会显示在折叠的侧边栏中。这是一个小麻烦，但我想知道是否有办法只在栏完全展开后才能显示文字。我想我可能会使用.on()事件来监视侧边栏扩展到它的全尺寸，但这似乎不必要地沉重（可能我错了）。

无论如何，这是我的代码。任何提示都将非常感激。

＆＃13;

$('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
  });
});

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

您可以在完成动画后显示评论

$('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>

Answer 2

.animate()有几个回调函数可用。这意味着您可以在动画完成后，或在期间，甚至在您想要之前执行代码。查看.animate()的jquery文档以获取更多信息。

我会写这样的代码：

$('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();
  });
});

fiddle

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

2 个答案: