我想讓specialist_pagecontent從左側出現（幻燈片），如blindleftin從here，但我不能使它與this一起工作。其實，計劃是，而不是hide()理想將是blindLeftOut('fast');hide()，而不是show()我需要show();blindLeftOut('slow')，但正如我所說，我不能讓blindLeftOut和blindLeftIn爲我工作。從jquery側面滑動（沒有jQuery UI）

2012-12-21 Igor Yavych

工作JSFiddle我結合2個小提琴製作於blindLeftOut和blindLeftIn工作的電話。查看我的答案以獲取詳細信息，並讓我知道這是您尋找的內容。另外，是否在你的問題有關'而不是show（）的錯字我需要show（）; blindLeftOut（'slow'）'？如果不是'而不是show（）我需要show（）; blindLeftIn（'slow'）'而不是看到它正在替換show和'blindLeftIn'來顯示。 – Nope

給出想要動畫進入和退出viweport的元素。您期待看到內部元素的圖層。然後將此viewport的overflow屬性設置爲hidden並給它一個特定的寬度/高度。

這樣您就可以動畫viewport中的元素，以便它們看起來滑入/滑出。

下面是我對您的JS的變化：

//notice the use of the "active" class to save state 
$('.specialist_pagecontent').eq(0).addClass("active").animate({ left : 0 }, 500); 
$('.specialist').click(function() { 
    //stop() is used to stop the current animation, so animations don't queue up if many buttons are clicked rapidly 
    $('.specialist_pagecontent').filter(".active").removeClass("active").stop(true).animate({ left : '-100%' }, 500); 
    $('.selected-specialist').removeClass('selected-specialist'); 
    $(this).addClass('selected-specialist'); 
    $('.specialist_pagecontent').eq($(this).index('.specialist')).addClass("active").stop(true).animate({ left : 0 }, 500); 
});

這裏是我的編輯建議的CSS：

.specialist_pagecontent { 
    position:absolute; 
    top:0; 
    left:-100%; 
} 
#specialist_lists { 
    float:left; 
    border: 1px solid #000000; 
    position:relative; 
    width:200px; 
    height:200px; 
    overflow:hidden; 
}

下面是一個演示：http://jsfiddle.net/Jwkw6/1/

這絕對定位要動畫的元素，這非常有用，因爲它從文檔的常規流中刪除元素（意味着它不會觸發整個頁面重繪當它動畫）。這也創建了我提到的viewport，創建了一個我們期待看到動畫的窗口。

來源

2012-12-21 23:12:42 Jasper

欣賞努力，但div與「specialist_pagecontent」divs應該留在「專家」權利div –

@Flyer按鈕下方的'.specialist_pagecontent' div放置的原因是因爲沒有足夠的空間水平，我其實並沒有'除了給'＃specialist_lists' div一個指定的寬度外，你可以做任何事情，這可以很容易地調整，以匹配你的用戶界面。 – Jasper

我真的很愚蠢。這看起來不錯。因爲它會「動態」，所以唯一需要弄清楚的是specialist_lists的高度 –

我認爲jQuery的animate函數可能對您有用。

你需要做的是將一個隱藏的div放在窗口外面添加到你的HTML中（或者可以使用jquery在document.ready事件上動態添加它，如果你喜歡的話）以及使用上面提到的動畫函數將其滑入和滑出並將其綁定到菜單項的點擊功能。

工作小提琴

這裏是你

來源

2012-12-21 23:16:07 Amyth

從jquery側面滑動（沒有jQuery UI）

回答

工作小提琴

相關問題