平滑JQuery寬度變化

我試圖動畫菜單，其中的懸停塊越來越大，而兄弟姐妹正在提供他們的空間，這種大小增加。所有塊一起佔用整個窗口寬度。平滑JQuery寬度變化

我成功地完成了使用一些基本的jquery，但結果有點笨重。最右邊的格從所有的計算受到影響，並四捨五入：

var width = $(window).width() - 44; 
var blockwidth = width/12; 
var blockwidthLarge = blockwidth+154; 
var blockwidthSmall = blockwidth-14; 
$('.headerblock').css('width',blockwidth+'px').hover(function() 
    { 
     $(this).siblings().stop(false,false).animate({width: blockwidthSmall},300); 
     $(this).stop(false,false).animate({width: blockwidthLarge},300); 

    },function() 
    { 
     $(this).siblings().stop(false,false).animate({width: blockwidth},300); 
     $(this).stop(false,false).animate({width: blockwidth},300); 

    });

這是一個工作的jsfiddle（我會建議將預覽框，以更大的東西，以增加效果的可見性）：

jsfiddle

我該如何改進這個框讓箱子顯得穩定？也許這已經被開發出來了？該網站應該是IE8 +兼容，所以我不能使用花哨的CSS規則。

來源

2014-03-12 Vincent Duprez

假設你想有所作爲就像蘋果30年的競選活動一樣，你可以嘗試模仿它們，將每個元素堆疊在一起，並改變它們的位置而不是寬度。 – Chad

有一個jQuery插件hoverIntent Brian Cherne可能會解決您的問題。

基本上，它所做的只是在它認爲用戶實際上想要懸停的時候觸發懸停事件。這是一個小比原來流體少，但它的工作時間很長，看起來很花哨。

下面是用在「外部資源」添加插件小提琴和

$('.headerblock').hover(function() {

改爲「.hoverIntent」

http://jsfiddle.net/Matze/c4uyR/1/

var width = $(window).width() - 44; 
var blockwidth = Math.round(width/12); 
var blockwidthLarge = blockwidth + 154; 
var blockwidthSmall = blockwidth - 14; 
$('.headerblock').css('width', blockwidth + 'px').hoverIntent(function() 
{ 
    $(this).siblings().stop(false, false).animate({ 
     width: blockwidthSmall 
    }, 300); 
    $(this).stop(false, false).animate({ 
     width: blockwidthLarge 
    }, 300); 

}, function() { 
    $(this).siblings().stop(false, false).animate({ 
     width: blockwidth 
    }, 300); 
    $(this).stop(false, false).animate({ 
     width: blockwidth 
    }, 300); 

});

來源

2014-03-25 14:11:06 Matt

這是否解決了您的問題？ – Matt

平滑JQuery寬度變化

回答

相關問題