停止展开的内容在页面加载时出现

Question

我有一个侧栏，其中包含悬停时展开的数字，以显示其旁边的文本。但是，当我刷新页面时，“隐藏”的内容在再次崩溃之前显示一秒钟。我怎样才能阻止这种情况发生？

这里是我的代码：

<div class="sidebar"> 
<ul> 
<li><a href=""><span>01</span> HomePage</a></li> 
<li><a href=""><span>02</span> SubPage 1</a></li> 
<li><a href=""><span>03</span> SubPage 2</a></li> 
<li><a href=""><span>04</span> SubPage 3</a></li> 
<li><a href=""><span>05</span> SubPage 4</a></li> 
</ul> 
</div> 


.sidebar { 
    position: fixed; 
    width:80px; 
    height:100vw; 
    top:0; 
    left:0; 
    z-index:100; 
    background:#111; 
    color:#fff; 
    overflow:hidden; 
} 
.sidebar ul { 
    margin:0; 
    padding:0; 
    width:200px; 
    margin:10px; 
    list-style:none; 
} 
.sidebar a span { 
    margin:0 10px 0 0; 
} 
.sidebar a { 
    color:#fff; 
    font-size:14px; 
    text-decoration:none; 
} 

和jQuery：

$(document).ready(function() { 
    $('.sidebar').hover(function(){ 
     $(this).animate({width:'110px'},500); 
    },function(){ 
     $(this).animate({width:'35px'},500); 
    }).trigger('mouseleave'); 
}); 

我做了什么错？我该如何解决它？ 谢谢！

Answer 1

定义您的默认CSS中的width: 35px更改并删除$.trigger('mouseleave')行。

你也可以用CSS来做到这一点，顺便说一句。如果你在每个$.animate()之前加上.stop()，如果你非常快速地将菜单悬停在/关闭菜单上，它会反复打开/关闭菜单。

$(document).ready(function() { 
 
    $('.sidebar').hover(function() { 
 
    $(this).animate({ 
 
     width: '110px' 
 
    }, 500); 
 
    }, function() { 
 
    $(this).animate({ 
 
     width: '35px' 
 
    }, 500); 
 
    }); 
 
});

.sidebar { 
 
    position: fixed; 
 
    width:35px; 
 
    height:100vw; 
 
    top:0; 
 
    left:0; 
 
    z-index:100; 
 
    background:#111; 
 
    color:#fff; 
 
    overflow:hidden; 
 
} 
 
.sidebar ul { 
 
    margin:0; 
 
    padding:0; 
 
    width:200px; 
 
    margin:10px; 
 
    list-style:none; 
 
} 
 
.sidebar a span { 
 
    margin:0 10px 0 0; 
 
} 
 
.sidebar a { 
 
    color:#fff; 
 
    font-size:14px; 
 
    text-decoration:none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="sidebar"> 
 
<ul> 
 
<li><a href=""><span>01</span> HomePage</a></li> 
 
<li><a href=""><span>02</span> SubPage 1</a></li> 
 
<li><a href=""><span>03</span> SubPage 2</a></li> 
 
<li><a href=""><span>04</span> SubPage 3</a></li> 
 
<li><a href=""><span>05</span> SubPage 4</a></li> 
 
</ul> 
 
</div>

这是在短短的CSS。简单得多。

.sidebar { 
 
    position: fixed; 
 
    width:35px; 
 
    height:100vw; 
 
    top:0; 
 
    left:0; 
 
    z-index:100; 
 
    background:#111; 
 
    color:#fff; 
 
    overflow:hidden; 
 
    transition: width .5s; 
 
} 
 
.sidebar:hover { 
 
    width: 110px; 
 
} 
 
.sidebar ul { 
 
    margin:0; 
 
    padding:0; 
 
    width:200px; 
 
    margin:10px; 
 
    list-style:none; 
 
} 
 
.sidebar a span { 
 
    margin:0 10px 0 0; 
 
} 
 
.sidebar a { 
 
    color:#fff; 
 
    font-size:14px; 
 
    text-decoration:none; 
 
}

<div class="sidebar"> 
 
    <ul> 
 
    <li><a href=""><span>01</span> HomePage</a></li> 
 
    <li><a href=""><span>02</span> SubPage 1</a></li> 
 
    <li><a href=""><span>03</span> SubPage 2</a></li> 
 
    <li><a href=""><span>04</span> SubPage 3</a></li> 
 
    <li><a href=""><span>05</span> SubPage 4</a></li> 
 
    </ul> 
 
</div>