javascript - 标志从一半展开

Question

有人知道您是否可以在 jquery 中执行此操作吗？单击 Logo 的一部分会在哪里展开其余部分？示例图片:

Answer 1

如果可以使用 CSS 实现，为什么还要使用 jQuery？

HTML:

<div id='icon-wrapper'>
  <img id='icon' alt='icon' src='http://i.stack.imgur.com/sKhJf.jpg?s=60&g=1'/>
  <p>Text here</p>
</div>

CSS:

#icon-wrapper{ 
    margin:0 auto;
    height:110px;
    width:110px;
    overflow:hidden;
    /* CSS Transitions */
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -ms-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease;
}
#icon-wrapper:after{
    content:"";
    display:block;
    width:100%;
    clear:both;
}
#icon-wrapper:hover{
    width:300px;
}
#icon-wrapper:hover #icon{
    margin-left:200px;
}
#icon{
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    border-radius: 100%;
    /* Position Absolute to put the icon on the top */
    position:absolute;
    z-index:10;
    /* CSS Transitions */
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -ms-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease;
}
#icon-wrapper p{
    color:black;
    font-size:35px;
    font-family:arial, helvetica;
    /* Fixed width and float left is needed */
    width:200px;
    float:left;
}

它很长，但不使用 jQuery 是一个加分点。请注意，我们需要为元素使用固定宽度，尤其是段落。

更新:对于透明图标，我们需要先隐藏文本，使用 opacity:0;。然后添加 CSS Transition 以便我们在悬停时有平滑的效果。最后，在悬停时显示不透明度为 1; 的文本。但是这个技巧有一个错误，有时文本没有快速“隐藏”，所以它仍然会在图标中显示一段时间。最好的解决方案是为图标添加背景颜色，使用与容器背景相同的颜色。

更新的 CSS(透明文本):

#icon-wrapper:hover p{
    opacity:1;
}

#icon-wrapper p{
    /* ... */
    opacity:0;
    -webkit-transition: all 2s ease-in;
    -moz-transition: all 2s ease-in;
    -ms-transition: all 2s ease-in;
    -o-transition: all 2s ease-in;
    transition: all 2s ease-in;
}

更新的 CSS(在图标上使用背景颜色):

#icon{
    /* ... */
    background:white;
}

这是一个jsFiddle

这是更新的 fiddle用于透明图标。

这是更新的 fiddle为图标添加了背景颜色。