fadedin或显示

Question

我正在使用一个简单的侧边栏，当用户点击切换按钮时它会打开，当它打开时，我想在图标旁边显示一些文字。

但是，当我打开侧边栏并尝试fadeIn()或show()文字时，它会跳过＆＃39;向上并产生不希望的扩展效果，然后在侧边栏本身扩展时放宽侧边栏。

有没有办法让这个文字只显示在图标旁边而不是跳跃效果？

我认为这是因为时间安排，但我不确定如何解决它而我不想使用setTimeout();

https://jsfiddle.net/dqf8byn9/

Answer 1

您可以尝试仅在侧边栏展开后显示文字。 animate()可以将一个函数作为参数完成时运行。尝试更改代码：

$('.sidebar').animate({ width: '200px' }, 400, "swing", function(){ $('span').removeClass('hidden'); });

400和"swing"是持续时间和宽松的默认值。

Answer 2

将.sidebar a添加到$('.sidebar-toggle').click(function() { if ($(this).hasClass('active')) { $(this).removeClass('active'); $('.sidebar').stop().animate({ width: '50px' }); $('span').stop().fadeOut(); } else { $(this).addClass('active'); $('.sidebar').stop().animate({ width: '200px' }); $('span').stop().fadeIn(); } });选择器可以解决问题。它还允许您将侧边栏视为宽或窄，如您所愿。

此代码段显示代码正常运行。

.sidebar {
  width: 50px;
  background: #ddd;
}

.sidebar a {
  display: block;
  white-space: nowrap;
}

span {
  position: relative;
  top: -1em;
  left: 1em;
}

.hidden {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sidebar">
  <a class="sidebar-toggle">
    <img src="http://placehold.it/30x30" />
    <span class="hidden">Test</span>
  </a>
  <a>
    <img src="http://placehold.it/30x30" />
    <span class="hidden">Test</span>
  </a>
  <a>
    <img src="http://placehold.it/30x30" />
    <span class="hidden">Test</span>
  </a>
</div>

public function getURL() {
        return getenv('HTTP_REFERER', true) ?: getenv('HTTP_REFERER');
    }