Question

我正在使用jquery mobile，其中不同的页面内容将在一个html页面中。

在页面更改（滑动页面）上，其他页面具有相同的边缘动画，因为所有html内容都将位于单个html页面中，只有第一个边缘动画将起作用，其余部分将无效。

我有两个阶段的身份

<div id="Stage" class="spring_animation"></div>

<div id="Stage2" class="spring_animation"></div>

以下代码用于一个阶段（<div id="Stage"）边缘动画工作......

<!--Adobe Edge Runtime-->
<script type="text/javascript" charset="utf-8" src="spring_edgePreload.js"></script>
<!--Adobe Edge Runtime End-->

<script type="text/javascript">
 jQuery(document).ready(function(){        
     jQuery('[data-url="10.htm"]').live('pageshow', function(){

        if($ && $.Edge && $.Edge.symbol.get($("#Stage"))){
            $('#Stage, #Stage > div').show();
            $.Edge.symbol.get($("#Stage")).play(0); 
        }

    });   
 });       
</script>

但是，它不起作用。

社区中的任何人都可以帮我解决这个问题吗？

我认为，问题依赖于adobe edge animate及其API。

Answer 1

我按照本教程进行操作。 http://blogs.adobe.com/edge/2012/05/15/bootstrapping-edge-compositions/

它使用普通的javascript来显示/隐藏正确的构图。所有的魔力都是因为回调： AdobeEdge.bootstrapCallback（function（compId）{ //当作曲准备好播放时，你的函数将被调用 }）;

如评论中所述，当作文准备好时，将调用此回调。我做了一个工作示例，在按钮点击时更改了构图。

Answer 2

您是否尝试将其应用于两个存在的ID：

<script type="text/javascript">
    $(document).ready(function(){
    jQuery('[data-url="10.htm"]').live('pageshow', function(){

        if($ && $.Edge && $.Edge.symbol.get($("Stage"))){
            $('#Stage, #Stage > div').show();
            $.Edge.symbol.get($("#Stage")).play(0);

        }
    });

    jQuery('[data-url="11.htm"]').live('pageshow', function(){

        if($ && $.Edge && $.Edge.symbol.get($("Stage2"))){
            $('#Stage2, #Stage2 > div').show();
            $.Edge.symbol.get($("#Stage2")).play(0);

        }
    });
});

</script>

如何在单个html页面中添加两个相同的adobe边缘动画？

2 个答案: