jQuery幻燈片/反彈div從右側懸停

我擁有的是一系列內容列表。當我們懸停每個盒子時，div會從右側滑入詳細信息（設計師也會喜歡'反彈'效果），並將鼠標隱藏起來。

我確實已經在項目中訪問jQueryUI。

這是我到目前爲止有：

HTML每盒

<div class="tool_master show"> 
    <div class="tool_hover"> Hover information here </div> 
    <div class="tool_box" > Content here </div> 
</div>

CSS

.tool_box { 
    height:100px; 
    width:460px; 
    position:relative; 
    } 
.tool_hover { 
    height:100px; 
    width:460px; 
    background:#525051; 
    position:absolute; 
    z-index:100; 
    display:none; 
}

我創建了一個jQuery腳本顯示/隱藏其中工程

$(".show").hover(function(){ 
     $(this).closest("div").find(".tool_hover").toggle(); 
    }, function(){ 
     $(this).closest("div").find(".tool_hover").toggle(); 
    });

This gets th完成工作但不提供設計師想要的「體驗」。

它需要做的是從右側滑入，很快，也許有一個反彈效果。退出時，向右滑出。我並不是很熟悉jquery動畫。

有人可以幫我嗎？

在此先感謝！

來源

2011-08-27 jrhaberman

你想要的是animate - 更換您的用動畫切換，並在PARAMATERS飼料的（性質，持續時間，緩解，callbackFunction參數）。

爲了使它適用於您的代碼，您需要更改/添加一些內容。從tool_hover沒有 - 相反，我們將通過它定位出側.show框隱藏它，然後設置.show的溢出隱患：一，撤銷顯示器。

你的CSS：

.show { 
    overflow:hidden; 
    position:relative; /* Otherwise the absolute positioned child element ignores overflow */ 
} 
.tool_hover { 
    z-index: 0; /* Take precedence over .tool_box */ 
    left: 500px; /* Starting position is outside .show , effectively hidden */ 
} 
.tool_box { 
    z-index: 1; /* So hover will cover this box */ 
}

接下來，我們要以取代動畫的切換功能。當你將鼠標懸停在框中，我們會告訴.tool_hover類通過設置它的左側位置，再來回到0只需使用替換第一.toggle（）：

... 
.animate({ 
    'left' : '0px'}, 
    'slow');

和第二跳（）搭配：

... 
.animate({ 
    'left' : '0px'}, 
    'slow');

這裏是一個jsfiddle證明

來源

2011-08-27 22:32:53 chris

完美。非常感謝你。我也發現了這一點：http://gsgd.co.uk/sandbox/jquery/easing/ ，並能結合設計者所期望的反彈效果。再次感謝！ – jrhaberman

jQuery幻燈片/反彈div從右側懸停

回答

相關問題