jquery的负载并与内容动画的iframe(jquery load and animate ifr

我试图单击时实现的内容滑动（和缓解）在菜单按钮的作用。这将是一个正常的网站使用不同的内容（画廊，组合，视频等）和子菜单中，将滑入一些网页。

我所学到的一切，通过预装和隐藏的div滑动滑动插件（如尾滑块）。但我有顾虑，如果我加载第一页上的整个网站，只是听上去错了。在另一方面，在与负载数据的I帧和加载（）我不能确定，我可以滑动并缓解数据（像滑块结尾实施例8）这样做。

有没有人这样做过，或有同样的想法，也不会介意分享？将不胜感激！

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

Answer 1:

我目前正在为我们的API类似的功能。我和加载与该拉Ajax内容为“视图”的div链接行的菜单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:

我写的科达滑块，并且最近还写了液体滑块，这是科达滑块的响应版本。

我也写了一篇关于如何加载点击后面板，使用Ajax Twitter的饲料一个简短的教程。我希望这有帮助...

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