jquery - 如何在单个 html 页面中添加两个相同的 adobe edge 动画？

Question

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

在页面更改(滑动页面)时，其他页面具有相同的边缘动画，因为所有 html 内容都将位于单个 html 页面中，只有第一个边缘动画起作用，其余的将不起作用。

我有两个阶段 ID

<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(函数(compId){//当乐曲准备好播放时，您的函数将被调用});

正如评论中所述，当合成准备就绪时，将调用此回调。我做了一个工作示例，可以在单击按钮时更改组合。