在鼠標懸停上滑動DIV的雙重級別

Question

我試圖創建一個類似於網站http://tracelytics.github.io/pageguide/的效果，當您將鼠標懸停在屏幕左側的「頁面指南」圖標上時，它會進一步延伸並顯示另一個隨之而來的信息水平。

我該如何得到這種效果？我也想使用相同的圖標。

我不知道從哪裏開始。任何樣品小提琴或插件將幫助我。謝謝。

Answer 1

http://jsfiddle.net/fenderistic/SqjfT/

這裏是一個非常簡單的實現，我創建模擬你在該插件看到。

var old; 
$(".hover").hover(
function(){ 
    old = $(this).css("right"); 
    $(this).animate({right:"0"},100); 
}, function() { 
    $(this).animate({right:old},100); 
} 
) 

Answer 2

你可以用CSS和jQuery的只開模做到這一點。這篇文章首先將只有CSS（我沒有放置圖像，但如果你有一些CSS知識，你可以添加你自己的圖像）。

http://jsfiddle.net/cornelas/9sH3v/

body { 
overflow: hidden; 
} 
#page_tab { 
background: #ccc; 
width: 150px; 
height: 50px; 
position: absolute; 
right: -5em; 
transition: all .5s ease;  
} 
#page_tab:hover { 
right: 0; 
transition: all .5s ease; 
} 

<div id="page_tab"></div> 

這裏是jQuery的

http://jsfiddle.net/cornelas/9sH3v/1/

$('#page_tab').click(function() { 
function buildFrame() { 
    if ($('#mid').length > 0) {} else { 
     $('body').append("<div id='mid'></div>"); 
     $('#mid').css({ 
      height: "100%", 
      width: "100%", 
      position: "absolute", 
      top: "0", 
       "backgroundColor": "rgba(51, 51, 51, .5)" 

     }); 
    } 
    if ($('#info').length > 0) {} else { 
     $('#mid').append("<div id='info'></div>"); 
     $('#info').css({ 
      position: "absolute", 
      top: "35%", 
      left: "35%", 
      fontSize: "6em", 
      color: "#fff" 
     }); 
    } 
} 
buildFrame(); 
$('#info').empty().append("YOUR CONTENT"); 
}); 

Answer 3

這種效應已與CSS3動畫來實現的。你必須在你的CSS聲明的過渡性質，在這裏你有一個例子代碼：

-webkit-transition: all 0.2s ease-in; 
-moz-transition: all 0.2s ease-in; 
-o-transition: all 0.2s ease-in; 
-ms-transition: all 0.2s ease-in; 
transition: all 0.2s ease-in; 

在這裏，你必須在的jsfiddle一個例子：

http://jsfiddle.net/elchininet/Zm9uc/

Answer 4

我可能會很慢，使提琴但是......她走了。你必須像這樣使用css transitions

-webkit-transition: all 0.2s ease-in; 
    -moz-transition: all 0.2s ease-in; 
    -o-transition: all 0.2s ease-in; 
    -ms-transition: all 0.2s ease-in; 
    transition: all 0.2s ease-in; 

。我做了一個小提琴。

http://jsfiddle.net/Davidicus/BpAL5/