展開標誌從一半

Question

任何人有任何想法，如果你可以在jQuery中做到這一點？點擊一張標誌展開其餘部分？示例圖片：

Answer 1

不知道這是不是你想要的東西。

檢查這裏的演示：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); 
}); 

Answer 2

爲什麼使用jQuery如果這可以使用CSS來實現？

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是一個加點。 請注意，我們需要使用固定寬度作爲元素，特別是段落。

UPDATE： 對於透明圖標，我們需要先使用opacity：0;來隱藏文本。然後添加CSS轉換，以便我們對懸停有平滑的效果。最後，用不透明度顯示懸停的文本：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背景顏色添加到圖標。