jQuery的菜單滑動和彈跳

http://jsfiddle.net/E6cUF/jQuery的菜單滑動和彈跳

的想法是，以後的頁面加載完從後面的綠色框左邊的灰色框幻燈片，如果有可能反彈一點。

編輯：由基於到的jsfiddle和尼古拉 http://jsfiddle.net/RBD3K/

評論做出改變的人。但是灰色的應該是後面從右側的綠色之一，滑到左邊，這樣看來

新版本

來源

2011-08-01 Writecoder

你想它在改變寬度的權利？ –

爲了讓它反彈你缺少兩件事我認爲：

1）你需要加載jQuery UI。

2）把動畫效果後反彈效果：

$('#test').click(function() { 
    var $marginLefty = $('.left'); 
    $marginLefty.animate({ 
     marginLeft: parseInt($marginLefty.css('marginLeft'),10) == 0 ? 
     $marginLefty.outerWidth() : 
     0 
    }).effect("bounce", { times:5 }, 300); 
    });

更新小提琴：http://jsfiddle.net/nicolapeluchetti/E6cUF/4/

來源

2011-08-01 14:24:04

謝謝，看到編輯過的第一篇文章！ – Writecoder

這樣的事情？ http://jsfiddle.net/nicolapeluchetti/RBD3K/1/ –

完全是這樣，但在左側，它們之間有一點空間，並在頁面加載後。我自己試了一下，加載後現在反彈，但灰色的div必須在左邊，灰色和綠色的div之間有10px的空格http://jsfiddle.net/RBD3K/5/非常感謝！ – Writecoder

試試這個。不知道這是你想要的。

$('#test').click(function() { 
    var $marginLefty = $('.left'); 
    var $marginRight = $('.right'); 
    $marginLefty.animate({ 
     marginLeft: 0 
    },{ duration: 200, queue: false }); 
    $marginRight.animate({ 
     marginLeft: 100 
    },{ duration: 200, queue: false }); 
    });

更新：從您的更新小提琴，爲.right position :absolute;z-index:1000添加爲CSS

http://jsfiddle.net/E6cUF/11/

來源

2011-08-01 14:41:09

jQuery的菜單滑動和彈跳

回答

相關問題