带图标的Jquery向左滑动菜单

我正在尝试用css和jquery创建一个菜单，它应该为每个菜单项显示一个图标，如果用户将菜单项悬停0.5秒，那么它应该缓慢向左滑动以显示菜单名。。我的意思实际上是类似于。我准备了一份。因为我对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>

---

使用css 3转换延迟，无需js即可完成，如：

正文{
背景色：#E2；
}
*{
填充：0px；
边际：0px；
}
#梅努迪夫{
填充物：5px；
背景：黄色；
显示：内联块；
}
#梅努迪夫a{
显示：内联块；
浮动：左；
溢出：隐藏；
宽度：48px；
线高：48px；
空白：nowrap；
利润率：8px；
文本缩进：50px；
-webkit转换延迟：.5s；
-moz转换延迟：.5s；
-o-过渡延迟：.5s；
转换延迟：.5s；
-webkit转换持续时间：1s；
-moz转换持续时间：1s；
-o-过渡持续时间：1s；
过渡时间：1s；
-webkit转换属性：文本缩进；
-moz转换属性：文本缩进；
-o-transition-property：文本缩进；
转换属性：文本缩进；
}
#梅努迪夫a：悬停{
文本缩进：0；
}
#menuDiv a#home{背景：粉色url（“http://3.ii.gl/e95k6KER.png）无重复左中心；}
#menuDiv a#help{背景：粉红色url（“http://3.ii.gl/E-E-GRnJt.png）无重复左中心；}
#menuDiv a#照片{背景：粉色url（“http://3.ii.gl/saNZbewlk.png）无重复左中心；}
#menuDiv a#mail{背景：粉色url（“http://3.ii.gl/eOns-8L.png）无重复左中；}

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

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>

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

---

为什么不浏览一下你链接的教程呢？这样你就能真正了解发生了什么，以及如何复制它？是的，你是对的。我已经检查过了，但我在js和css文件中迷失了方向。。好的，如果没有人会帮助我，我会试着去做。至少试一下，然后发布你想出的代码。我认为，一旦你表现出一点努力，人们就会更愿意提供帮助。祝你好运。可能是我一个已解决问题的重复：谢谢你的回答。这几乎是我所需要的。但是我不想突然打开菜单文本。。如果悬停时间为0.5秒，则应选择文本，否则不应打开文本。因此，只需设置

转换延迟

。它工作得很好。。好的：）我的最后一个问题。我的一些菜单项对于宽度来说太长：100px；我不想让它变成200px，因为其他一些菜单项对于200px来说太短了。。你知道如何使宽度只包裹文本吗？我想，那么你必须重新生成我的代码。浏览器不支持从/到

auto

width的CSS转换。