Jquery用图标滑动左侧菜单

Question

我正在尝试用css和jquery创建一个菜单，它应该显示每个菜单项的图标，如果用户悬停菜单项0.5秒，那么它应该慢慢向左滑动以显示菜单的名称..我的意思实际上类似于this plugin。我准备了jsfiddle here。由于我对Web前端开发很陌生，所以我无法继续进行。我向你求助。感谢。

<div id="menuDiv">
    <a href="#" id="home">App Home</a>
    <a href="#" id="help">Help</a>
    <a href="#" id="photos">See photos</a>
    <a href="#" id="mail">Send a Mail</a>
</div>

Answer 1

我认为您将在代码中进行“一些”更改

JSFiddle

的 HTML：

<div id="menuDiv">
    <a href="#" id="home">
        <span class="menuIcon"></span>
        <span class="menuText">App Home</span>
    </a>
    <a href="#" id="help">
        <span class="menuIcon"></span>
        <span class="menuText">Help</span>
    </a>
    <a href="#" id="photos">
        <span class="menuIcon"></span>
        <span class="menuText">See photos</span>
    </a>
    <a href="#" id="mail">
        <span class="menuIcon"></span>
        <span class="menuText">Mail</span>
    </a>
</div>

的 CSS：

body{
    background-color: #E2E2E2;
}

*{
    padding :0px;
    margin: 0px;
}

#menuDiv{
    padding:5px;
    background: yellow;
    display: inline-block;
    float: right;
}

#menuDiv a {

    background: pink;
    width: 48px;
    height: 48px;
    float: right;
    overflow: hidden;
    position: relative;
    -webkit-transition: all 0.5s linear;
    transition: all 0.5s linear;
}

#menuDiv .menuIcon {

    width: 48px;
    height: 48px;
    float: left;
    -webkit-transition: all 0.5s linear;
    transition: all 0.5s linear;
}

#menuDiv a#home .menuIcon {
    background: url("http://3.ii.gl/e95k6KER.png") no-repeat left center;
}

#menuDiv a#help .menuIcon {
    background: url("http://3.ii.gl/E-E-GRnJt.png") no-repeat left center;
}

#menuDiv a#photos .menuIcon {
    background: url("http://3.ii.gl/saNZbewlk.png") no-repeat left center;
}

#menuDiv a#mail .menuIcon {
    background: url("http://3.ii.gl/eOns-8L.png") no-repeat left center;
}

#menuDiv .menuText {
    width: 100px;
    height: 48px;
    line-height: 48px;
    position: absolute;
    padding-left: 16px;
    text-decoration: none;
    left: 48px;
}

#menuDiv a:hover {
    width: 148px;
}

#menuDiv a:hover .menuIcon {
    -webkit-transform: rotate(-1440deg);
    transform: rotate(-1440deg);
}

Answer 2

你可以在没有js的情况下使用css 3转换延迟，例如：

＆＃13;

＆＃13;

body{
	background-color: #E2E2E2;
}
*{
	padding :0px;
	margin: 0px;
}
#menuDiv{
	padding:5px;
	background: yellow;
	display: inline-block;
}

#menuDiv a{
	display: inline-block;
	float: left;
	overflow: hidden;
	width:48px;
	line-height: 48px;
	white-space:nowrap;
	margin: 8px;
	text-indent:50px;
    
    -webkit-transition-delay: .5s;
    -moz-transition-delay: .5s;
    -o-transition-delay: .5s;
    transition-delay: .5s;
    
    -webkit-transition-duration: 1s;
    -moz-transition-duration: 1s;
    -o-transition-duration: 1s;
    transition-duration: 1s;
    
      -webkit-transition-property: text-indent;
      -moz-transition-property: text-indent;
      -o-transition-property: text-indent;
      transition-property: text-indent;
}
#menuDiv a:hover {
    text-indent: 0;
}

#menuDiv a#home{background: pink url("http://3.ii.gl/e95k6KER.png") no-repeat left center;}

#menuDiv a#help{background: pink url("http://3.ii.gl/E-E-GRnJt.png") no-repeat left center;}
#menuDiv a#photos{background: pink url("http://3.ii.gl/saNZbewlk.png") no-repeat left center;}
#menuDiv a#mail{background: pink url("http://3.ii.gl/eOns-8L.png") no-repeat left center;}

＆＃13;

<div id="menuDiv">
	<a href="#" id="home">App Home</a>
	<a href="#" id="help">Help</a>
	<a href="#" id="photos">See photos</a>
	<a href="#" id="mail">Send a Mail</a>
</div>

＆＃13;

＆＃13;

＆＃13;

在这个例子中，我为文本缩进设置动画，根据需要进行调整。