Как добавить две одинаковые анимации Adobe Edge на одну HTML-страницу?

Я использую 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.


jquery jquery-mobile adobe adobe-edge
person Justin John    schedule 22.01.2013    source источник
comment
Пожалуйста, опубликуйте live или jsfiddle с тем, что вы пробовали.   -  person radu florescu    schedule 25.01.2013
comment
Вы нашли решение.? Вам все еще нужна помощь с этим.?   -  person Konstantinos Margaritis    schedule 08.04.2013
comment
@KonstantinosMargaritis У меня нет хорошего решения, но работа сделана. Что я сделал, так это удалил id Stage и добавил класс для элемента с помощью getComposition $.Edge.getComposition( 'yourclass' ).play(0); и обернул его внутри другого контейнера div. На каждой странице покажите, есть ли соответствующий элемент с классом или нет. Если элемента нет (анимация еще не воспроизведена), используйте обычный метод else используйте отсоединить элементы от места их размещения и добавить (api. jquery.com/append) в оболочку div на странице show of page.   -  person Justin John    schedule 08.04.2013
comment
Вы решили эту проблему?   -  person JD.    schedule 25.08.2014
comment
@ДжД. На самом деле я забываю вещи. Мне удалось заставить его работать с помощью того же, что описано в моем предыдущем комментарии.   -  person Justin John    schedule 25.08.2014
comment
@Джастин. Спасибо, надо было прочитать комментарий.   -  person JD.    schedule 25.08.2014

Ответы (2)


arrow_upward
1
arrow_downward

Я следовал этому руководству, и оно работает. http://blogs.adobe.com/edge/2012/05/15/bootstrapping-edge-compositions/

Он использует простой javascript, чтобы показать/скрыть правильную композицию. Все волшебство происходит из-за обратного вызова: AdobeEdge.bootstrapCallback(function (compId) { // ваша функция будет вызвана, когда композиция будет готова к воспроизведению });

Как указано в комментарии, этот обратный вызов будет вызван, когда композиция будет готова. Я сделал рабочий пример, который меняет композицию при нажатии кнопки.

person Ena    schedule 23.03.2013

arrow_upward
0
arrow_downward

Вы пытались применить его к обоим присутствующим идентификаторам:

<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>
person radu florescu    schedule 25.01.2013
comment
Проблема не в jquery. Это в Edge Animate... Приведенный выше синтаксис будет работать, когда Edge создал свои элементы внутри stage div. - person Justin John; 25.01.2013
comment
.live(events, handler(eventObject)) Возвращает: версия jQuery устарела: 1.7, удалена: 1.9 Описание: Прикрепите обработчик событий для всех элементов, соответствующих текущему селектору, сейчас и в будущем. - person radu florescu; 25.01.2013
comment
Спасибо... Я знаю, я использую v1.8.3. Знакомы ли вы с adobe edge animate и его API? - person Justin John; 25.01.2013
comment
Нет, только jQuery, но довольно странно не использовать этот код в document.ready, не там, потому что ваш dom загружен не полностью. - person radu florescu; 25.01.2013
comment
Край создаст свои элементы внутри #stage div при загрузке spring_edgePreload.js. Код в готовом обработчике используется для повторного воспроизведения анимации, когда страница снова перемещается обратно на страницу анимации (10.htm). Если на втором этапе не создаются никакие элементы, как мы можем это воспроизвести? Обе анимации края находятся на одной html-странице, и это вызывает проблему. Без экспозиции в Adobe Edge Animate я не могу полностью убедить вас, в чем моя проблема. Спасибо ваш ответ... - person Justin John; 25.01.2013
comment
Я все еще думаю, что вы должны проверить, используя document.ready, как было предложено, иначе написанный вами код будет выполнен, как только он будет отображен на странице. Мне жаль, что я не знаком с API. - person radu florescu; 25.01.2013
comment
Извините, я не добавил document.ready в свой пост. У меня уже есть это в моем локальном файле. Спасибо, что указали на это. - person Justin John; 25.01.2013