Question

有人知道你是否可以在jquery中这样做？点击一块徽标会扩展剩下的部分吗？示例图片： enter image description here

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是一个加分点。请注意，我们需要对元素使用固定宽度，尤其是段落。

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

更新了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，其背景颜色已添加到图标中。

Answer 2

不确定这是否是您想要的。

在此处查看演示：http://jsfiddle.net/SdanM/4/

HTML：

<div id="container">    
    <div id="img">Hidden Element</div>
    <div id="btn">Hover to expand</div>
<div>

CSS：首先隐藏hidden element

#container {
    position: relative;
}
#img {
    background-color: yellow;
    position: absolute;
    width: 100px;
    height: 50px;
    top: 50px;
    left: 50px;
    display: none;
}

#btn {
    background-color: red;
    position: absolute;
    width: 50px;
    height: 50px;
    top: 50px;
    left: 50px;
}

jQuery：移动块

$("#container").mouseenter( function() {
    $("#img").animate({
        left: "-=50",
        width: "show",
    }, 1000);

    $("#btn").animate({
        left: "+=50",
    }, 1000);
});

$("#container").mouseleave( function() {
    $("#img").animate({
        left: "+=50",
        width: "hide",
    }, 1000);

    $("#btn").animate({
        left: "-=50",
    }, 1000);
});

从一半扩展徽标

2 个答案: