javascript - jquery .append iframe 动画

Question

我正在尝试编写一个页面，该页面允许在我的网页中单击多个按钮，并允许 iframe 加载向下滑动的内容，并在加载时将其他内容进一步向下敲。

我已经尝试了各种不同的方法来使用 jquery .animate 函数来上下滚动，但由于某种原因我无法让它工作。

有人有什么建议吗？

$(document).ready(function() {
    $(".iframe").click(function() {
            var file = $(this).attr("data-url");
            var size = $(this).attr("data-size");
            $(this).parent('article').append("<iframe class='articleframe' height='" + size + "' src='" + file + "'>Moo</iframe>"); 
            $(this).siblings('.open').css('display','inline-block');
            $(this).hide();
        });
    $(".open").click(function() {
            $(this).hide();
            $(this).siblings('.iframe').css('display','inline-block');
            $(this).siblings('.articleframe').remove();
    });
});

<article>
    <h2>Querybox</h2>
    <h5 class="button iframe" data-url="http://www.bbc.co.uk" data-size="900px"  >Load another file</h5>
    <h5 class='button open'>Hide Frame</h5>
</article>

Answer 1

对于那些有视觉依赖的人 :) fiddlywiddly

您可能需要根据您的规范进行调整，但这可以解决问题:

Javascript:

将“.append()”更改为“.prepend()”

$(document).ready(function () {
    $(".iframe").click(function () {
        var file = $(this).data("url");
        var size = $(this).data("size");
        var $one = $('#one');
        $one.prepend("<h5 class='button open'>Hide Frame</h5><div class='frame-contain'><iframe class='articleframe' height=0 src='" + file + "'></iframe></div>");
        var $wrap = $one.find('.frame-contain:first');
        $wrap.animate({
            height: size
        }, {
            duration: 1000,
            step: function (now) {
                $(this).height(now);
                $(this).nextAll('.frame-contain').offsetParent().top += now;
                $(this).find('iframe').height(now);
            },
            complete: function () {
                $(".open").click(function () {
                    $(this).next('div').slideUp(1000);
                    $(this).fadeOut('slow');
                });
            }
        });
    });
});

我还建议重新安排您的元素，但这取决于您。你可以把你的 <h5>按钮变成 <header>和 <iframe>创作成<section> .引人深思。这样你的按钮就不会乱飞了。我的例子利用了这个想法。

HTML:

<article>
    <header>
         <h2>Querybox</h2>
         <h5 class="button iframe" data-url="http://www.bbc.co.uk" data-size="900">Load another file</h5> 
    </header>
    <section id="one"></section>
</article>

CSS:

iframe, header, section, div {
    clear: left;
    position: relative;
    display: block;
}
section, div {
    width: 100%;
    max-height: 100%;
}
.open {
    clear: left;
    display: block;
}
.articleframe {
    float: left;
}

由于我不确定您在这里的最终游戏，因此我做出了最好的解释。请记住，这段代码的设置方式非常低效(许多使用 jQuery 的选择器代码非常密集)。

我建议你放更多 id事物上的标签并使用 $(document.getElementById('id')) 引用那些或 $(document.querySelector('#id')) .此外，使用 jQuery .width()和 .height()也受到了巨大的打击。您应该使用 javascript native 选择器，然后应用 .innerWidth = XX或 .innerHeight = XX .

通常情况下，这种小规模的性能并不是非常重要，但考虑到您要显示的内容及其对浏览器的影响，它可能会对您有所帮助。

有关性能提升的示例:JSPerf - innerHeight vs. .height()