jquery加载和动画iframe与内容 [英] jquery load and animate iframe with content

问题描述

我正在尝试在单击菜单按钮时实现内容滑动（和缓动）的效果。这将是一个普通网站，其中包含不同的内容（图库，投资组合，视频等）以及某些页面上可能会滑入的子菜单。

I'm trying to achieve an effect of content sliding (and easing) in a menu button when it is clicked. It would be for a normal site with different content (gallery, portfolio, videos, etc) and submenus on some pages that would slide in.

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

I have learned about all the sliding plugins (like coda slider) that slide through pre loaded and hidden divs. but i have concerns that if i load the whole website on the first page, that just sound wrong. on the other hand doing it with iframes and loading in data with load() i'm unsure i can slide and ease the data in (like coda slider example 8).

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

has anyone done this before or had the same idea and wouldn't mind sharing? would be greatly appreciated!

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

推荐答案

我目前正在为api开发一个类似的功能。我加载一个带有链接行的菜单div，将ajax内容拉入viewdiv，然后我将菜单设置为动画，然后将视图设置为主iFrame动画。这很容易做到，请查看我的一些javascript和html。当我推动它时，我会回来并更新答案，你可以挖掘成品。希望这会有所帮助。

I am currently working on a similar feature for our api. I and loading a menu div with rows of links which pull ajax content into a"view" div, I then animate the menu away and then animate the view into the main iFrame. This was so easy to do so check out some of my javascript and html bellow. When I push this up i'll come back and update the answer you you can have a dig around the finished product. Hope this helps.

<!-- 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的顶部。然后我拨打电话获得比赛记分卡

The matchHolder is used to display the loaded and content and is given a -600px position so its hidden outside the top of the iFrame. Then I make a call to get the scorecard for a match

$(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() {

        });
    });
}

此刻非常松散地放在一起，但我希望这会给你一个指示从哪里开始，可以做到这一点。谢谢。

All very loosely put together at the moment but I hope this gives you an indication of where to start and that it is possible to do it. Thanks.

这篇关于jquery加载和动画iframe与内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！