我試圖實現內容在點擊時在菜單按鈕中滑動（和緩動）的效果。這將是一個正常的網站與不同的內容（畫廊，投資組合，視頻等）和一些頁面上的子菜單，將滑入。jquery加載和帶內容的動畫iframe
我已經學會了所有的滑動插件（如結尾滑塊）加載和隱藏的div。但我擔心如果我在第一頁上加載整個網站，那聽起來錯了。另一方面用iframe做，並用load（）加載數據我不確定我可以滑動和緩解數據（如結尾滑塊示例8）。
有沒有人以前做過或有相同的想法，不介意分享？ 將不勝感激！
http://www.ndoherty.biz/demos/coda-slider/2.0/#2
我目前正在爲我們的API類似的功能。我和加載一個菜單div與鏈接的行將ajax內容拉入一個「視圖」div，然後動畫菜單，然後動畫視圖到主要的iFrame。這很容易做到，所以檢查一下我的JavaScript和HTML波紋管。當我推動這一點時，我會回來並更新答案，你可以在成品周圍進行挖掘。希望這可以幫助。
<!-- list all the available matches first -->
<div id="MatchContainer">
<div id="spinner"></div>
<div id="matchesListHolder">
<% if @matches %>
<% @matches.each do |match| %>
<%= render :partial => 'plugins/live/clubs/matches_list_item', :locals => {:match => match} %>
<% end %>
<% else %>
There are currently no matches to display
<% end %>
</div>
<div id="matchHolder">
</div>
<div id="closeMatchView">x</div>
</div>
的matchHolder用於顯示所加載和內容，並給出一個-600px位置，從而其隱藏的iFrame的頂部外側。然後，我撥打電話，以獲得記分卡匹配
$(function() {
// click event fired to change to the match view window
$('.matchLink').click(function(event) {
if (!clicked) {
clicked = true; // stop click reptition
event.preventDefault();
var live = ($(this).attr('live') == 'true') ? true : false;
var matchId = Number($(this).attr('id'));
$('#matchesListHolder').animate({top: -600}, 500, function() {
$(this).hide();
$('#spinner').show();
if (live) {
displayLiveMatch(matchId);
} else {
displayMatch(matchId);
}
});
}
});
// click function on the close button when the match view window is open
$('#closeMatchView').click(function() {
closeMatchView();
});
});
// display a scorecard for a finished match
function displayMatch(id) {
$.get('/plugins/matches/scorecard/' + id, function(response) {
$('#matchHolder').empty().html(response);
moveDownMatchHolder();
});
}
// move down the match holder container into the iframe
function moveDownMatchHolder() {
$('#spinner').hide();
$('#matchHolder').show().animate({top: 0}, 500, function() {
$('#closeMatchView').show();
});
}
// close the match view and re open the matches list
function closeMatchView() {
$('#closeMatchView').hide();
clicked = false;
$('#matchHolder').animate({top: -600}, 500, function() {
$(this).hide();
$('#matchesListHolder').show().animate({top: 0}, 500, function() {
});
});
}
所有非常鬆散的時刻放在一起，但我希望這給你從哪裏開始的指示，並且有可能做到這一點。謝謝。
我寫了Coda Slider，最近也寫了Liquid Slider，這是Coda Slider的響應版本。
我還寫了一篇關於如何在使用Ajax單擊面板後加載Twitter提要的簡短教程。我希望這有助於...