jquery 加载内容并为 iframe 制作动画

Question

我试图在单击菜单按钮时实现内容滑动（和缓动）的效果。这将适用于具有不同内容（图库、作品集、视频等）和某些页面上会滑入的子菜单的普通网站。

我已经了解了所有可在预加载和隐藏的 div 中滑动的滑动插件（如 coda 滑块） 。但我担心如果我在第一页加载整个网站，那听起来就是错误的。另一方面，使用 iframe 进行操作并使用 load() 加载数据，我不确定是否可以滑动和缓和数据（如 coda 滑块示例 8）。

有没有人以前做过这个或有相同的想法并且不介意分享？ 将不胜感激！

http://www.ndoherty.biz/demos/coda-slider/2.0 /#2

Answer 1

我目前正在为我们的 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() {

        });
    });
}

目前所有这些都非常松散地组合在一起，但我希望这能让您知道从哪里开始并且可以做到这一点。谢谢。

Answer 2

我编写了 Coda Slider，最近还编写了 Liquid Slider，它是 Coda Slider 的响应式版本。

我还编写了一个简短的教程，介绍如何使用 Ajax 在单击面板后加载 Twitter 源。我希望这会有所帮助...

http://liquidslider.kevinbatdorf.com/tutorials/dynamically-add-content-to-a-panel-when-clicked-using-ajax/