jquery滑入和滑出鼠標緩解效應

Question

我正在尋找一個jQuery腳本來實現易於進出效果與隱藏/顯示div在this site上實現。

這是我在mouseover()腳本：

$("#box0").mouseover(function() { 
    $("#lSection2").fadeIn(100);  
    $("#boxContent0").fadeIn(100); 
}); 
$('#boxContent0').mouseout(function() { 
    $("#boxContent0").fadeOut(100);  
    $("#lSection2").fadeOut(100); 
}); 

CSS：

.AdBox { 
    width: 300px; 
    height: 180px; 
    border: 6px solid #fff; 
    -webkit-border-radius: 5px; 
    -moz-border-radius: 5px; 
    -o-border-radius: 5px; 
    border-radius: 5px; 
    float: left; 
    margin-right: 10px; 
    margin-left: 10px; 
} 

.AdBoxl { 
    width: 300px; 
    height: 180px; 
    border: 6px solid #666; 
    float: right; 
} 

.boxContent div { 
    width: 180px; 
    padding: 10px; 
    font-family: Arial, Helvetica, sans-serif; 
    font-weight: bold; 
    font-size: 16px; 
    height: 120px; 
    border: 4px solid #fff; 
    float: left; 
    margin-right: 10px; 
    margin-left: 20px; 
    -webkit-border-radius: 3px; 
    -moz-border-radius: 3px; 
    -o-border-radius: 3px; 
    border-radius: 3px; 
    background-color: #80634A; 
} 

#lSection2 { 
    height: 120px; 
    width: 100%; 
    position: relative; 
    top: 10px; 
    padding-left: auto; 
    padding-right: auto; 
} 

.boxContent { 
    width: 970px; 
    background-image: url(../images/gridtile.png); 
    height: 150px; 
    padding-top: 15px; 
} 

HTML：

鼠標或點擊查看詳情

大贏
- Ipad的
- 假日
- 1年水療護理

似乎並沒有工作，請幫助。

Answer 1

您不需要特殊的插件來執行jQuery緩動。你可以簡單地將你選擇的緩動函數包含到你的jQuery中。 （我選「easeOutCubic」只是適用於所有的動畫一個例子，但每個動畫也可以有自己的。）

$.easing.easeOutCubic = function (x, t, b, c, d) { 
    return c*((t=t/d-1)*t*t + 1) + b; 
} 

$("#box0").mouseover(function() { 
    $("#lSection2").fadeIn(100, 'easeOutCubic');  
    $("#boxContent0").fadeIn(100, 'easeOutCubic'); 
}); 
$('#boxContent0').mouseout(function() { 
    $("#boxContent0").fadeOut(100, 'easeOutCubic');  
    $("#lSection2").fadeOut(100, 'easeOutCubic'); 
}); 

看到這個答案的詳細信息...

jQuery.easing - easeOutCubic - emphasizing on the ease

你可以直觀地查看這裏某些緩和的功能...

http://jqueryui.com/demos/effect/easing.html

這些是相應的功能。由於這些事件是如何

你的代碼使用mouseover和mouseout可能導致不穩定的行爲：只要選擇並使用相應的功能，以您的項目......

swing: function (x, t, b, c, d) { 
    return $.easing[$.easing.def](x, t, b, c, d); 
}, 
easeInQuad: function (x, t, b, c, d) { 
    return c*(t/=d)*t + b; 
}, 
easeOutQuad: function (x, t, b, c, d) { 
    return -c *(t/=d)*(t-2) + b; 
}, 
easeInOutQuad: function (x, t, b, c, d) { 
    if ((t/=d/2) < 1) return c/2*t*t + b; 
    return -c/2 * ((--t)*(t-2) - 1) + b; 
}, 
easeInCubic: function (x, t, b, c, d) { 
    return c*(t/=d)*t*t + b; 
}, 
easeOutCubic: function (x, t, b, c, d) { 
    return c*((t=t/d-1)*t*t + 1) + b; 
}, 
easeInOutCubic: function (x, t, b, c, d) { 
    if ((t/=d/2) < 1) return c/2*t*t*t + b; 
    return c/2*((t-=2)*t*t + 2) + b; 
}, 
easeInQuart: function (x, t, b, c, d) { 
    return c*(t/=d)*t*t*t + b; 
}, 
easeOutQuart: function (x, t, b, c, d) { 
    return -c * ((t=t/d-1)*t*t*t - 1) + b; 
}, 
easeInOutQuart: function (x, t, b, c, d) { 
    if ((t/=d/2) < 1) return c/2*t*t*t*t + b; 
    return -c/2 * ((t-=2)*t*t*t - 2) + b; 
}, 
easeInQuint: function (x, t, b, c, d) { 
    return c*(t/=d)*t*t*t*t + b; 
}, 
easeOutQuint: function (x, t, b, c, d) { 
    return c*((t=t/d-1)*t*t*t*t + 1) + b; 
}, 
easeInOutQuint: function (x, t, b, c, d) { 
    if ((t/=d/2) < 1) return c/2*t*t*t*t*t + b; 
    return c/2*((t-=2)*t*t*t*t + 2) + b; 
}, 
easeInSine: function (x, t, b, c, d) { 
    return -c * Math.cos(t/d * (Math.PI/2)) + c + b; 
}, 
easeOutSine: function (x, t, b, c, d) { 
    return c * Math.sin(t/d * (Math.PI/2)) + b; 
}, 
easeInOutSine: function (x, t, b, c, d) { 
    return -c/2 * (Math.cos(Math.PI*t/d) - 1) + b; 
}, 
easeInExpo: function (x, t, b, c, d) { 
    return (t==0) ? b : c * Math.pow(2, 10 * (t/d - 1)) + b; 
}, 
easeOutExpo: function (x, t, b, c, d) { 
    return (t==d) ? b+c : c * (-Math.pow(2, -10 * t/d) + 1) + b; 
}, 
easeInOutExpo: function (x, t, b, c, d) { 
    if (t==0) return b; 
    if (t==d) return b+c; 
    if ((t/=d/2) < 1) return c/2 * Math.pow(2, 10 * (t - 1)) + b; 
    return c/2 * (-Math.pow(2, -10 * --t) + 2) + b; 
}, 
easeInCirc: function (x, t, b, c, d) { 
    return -c * (Math.sqrt(1 - (t/=d)*t) - 1) + b; 
}, 
easeOutCirc: function (x, t, b, c, d) { 
    return c * Math.sqrt(1 - (t=t/d-1)*t) + b; 
}, 
easeInOutCirc: function (x, t, b, c, d) { 
    if ((t/=d/2) < 1) return -c/2 * (Math.sqrt(1 - t*t) - 1) + b; 
    return c/2 * (Math.sqrt(1 - (t-=2)*t) + 1) + b; 
}, 
easeInElastic: function (x, t, b, c, d) { 
    var s=1.70158;var p=0;var a=c; 
    if (t==0) return b; if ((t/=d)==1) return b+c; if (!p) p=d*.3; 
    if (a < Math.abs(c)) { a=c; var s=p/4; } 
    else var s = p/(2*Math.PI) * Math.asin (c/a); 
    return -(a*Math.pow(2,10*(t-=1)) * Math.sin((t*d-s)*(2*Math.PI)/p)) + b; 
}, 
easeOutElastic: function (x, t, b, c, d) { 
    var s=1.70158;var p=0;var a=c; 
    if (t==0) return b; if ((t/=d)==1) return b+c; if (!p) p=d*.3; 
    if (a < Math.abs(c)) { a=c; var s=p/4; } 
    else var s = p/(2*Math.PI) * Math.asin (c/a); 
    return a*Math.pow(2,-10*t) * Math.sin((t*d-s)*(2*Math.PI)/p) + c + b; 
}, 
easeInOutElastic: function (x, t, b, c, d) { 
    var s=1.70158;var p=0;var a=c; 
    if (t==0) return b; if ((t/=d/2)==2) return b+c; if (!p) p=d*(.3*1.5); 
    if (a < Math.abs(c)) { a=c; var s=p/4; } 
    else var s = p/(2*Math.PI) * Math.asin (c/a); 
    if (t < 1) return -.5*(a*Math.pow(2,10*(t-=1)) * Math.sin((t*d-s)*(2*Math.PI)/p)) + b; 
    return a*Math.pow(2,-10*(t-=1)) * Math.sin((t*d-s)*(2*Math.PI)/p)*.5 + c + b; 
}, 
easeInBack: function (x, t, b, c, d, s) { 
    if (s == undefined) s = 1.70158; 
    return c*(t/=d)*t*((s+1)*t - s) + b; 
}, 
easeOutBack: function (x, t, b, c, d, s) { 
    if (s == undefined) s = 1.70158; 
    return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b; 
}, 
easeInOutBack: function (x, t, b, c, d, s) { 
    if (s == undefined) s = 1.70158; 
    if ((t/=d/2) < 1) return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b; 
    return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b; 
}, 
easeInBounce: function (x, t, b, c, d) { 
    return c - $.easing.easeOutBounce (x, d-t, 0, c, d) + b; 
}, 
easeOutBounce: function (x, t, b, c, d) { 
    if ((t/=d) < (1/2.75)) { 
     return c*(7.5625*t*t) + b; 
    } else if (t < (2/2.75)) { 
     return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b; 
    } else if (t < (2.5/2.75)) { 
     return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b; 
    } else { 
     return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b; 
    } 
}, 
easeInOutBounce: function (x, t, b, c, d) { 
    if (t < d/2) return $.easing.easeInBounce (x, t*2, 0, c, d) * .5 + b; 
    return $.easing.easeOutBounce (x, t*2-d, 0, c, d) * .5 + c*.5 + b; 
} 

---

圖片的標題說明被解僱。當鼠標懸停在物品上時，mouseover將多次觸發。 mouseenter和mouseleave要穩定得多。 You could even use .hover() which automatically combines .mouseenter() and .mouseleave() into one method.

而你的動畫持續時間爲100只有十分之一秒。這太快了，無法看到任何緩解效應。