2013-08-24 3 views
1

Я ищу, чтобы просто скрыть и изображение до загрузки страницы, а затем, как только страница загрузится, чтобы показать изображение. Проблема в том, что когда я пытаюсь показать изображение, оно вообще не отображает изображение..Show() не работает в JQuery Mobile

Вот мой HTML-код:

<body> 

    <div id ="splash" data-role="page"> 
     <center> 
      <div id='class'> <img src="BookBayText.png"></div> 
      <div id='book'> <img src="Book.png"></div> 
     </center> 
    </div> 

</body> 

Вот мой JavaScript/JQuery мобильный:

<script type="text/javascript"> 

     $(document).on('pagebeforeshow','#splash', 
      function() 
      { 
       $("#book").hide(); 
      }); 

     $(document).on('pageinit','#splash', 
      function(){ 

       setTimeout(
        function() 
        { 
         $("#class").animate({top: "1em"}, 'slow'); 
        },3000); 

       //For some reason this line below doesn't run 
       $("#book").show(); 

     }); 
    </script> 

Любые идеи, почему это не работает ??

+1

Это лучше использовать CSS, чтобы скрыть что-то на начальном этапе. Кроме того, вы можете просто использовать '$ (function() {$ ('# book'). Show();});' –

+0

. Метод aanimate() не отображает скрытые элементы как часть эффекта. http://api.jquery.com/animate/ – carter

+0

Я знаю, что анимация не скрывает изображение, я использую анимацию для перемещения изображения BookBayText.png вверх – user481610

ответ

0

мне удалось получить желаемый эффект, я хотел с помощью следующего кода:

setTimeout(
    function() 
    { 
     $("#class").animate({top: "1em"}, 'slow'); 
     $("#book").show(); 
    },2000); 

В основном я переехал $("#book").show(); строки в функцию SetTimeout. Но это все равно оставляет меня чуть ли не в том, почему код не отображает изображение вне функции. Если кто-нибудь, кто ответит на это, может обновить этот ответ, это будет очень признательно.

0

kinda похоже на это сообщение jQuery mobile popup on pageinit.

Хотя сообщение обвиняет задержку в браузере, для меня до сих пор неясно, почему он это делает. Я никогда не испытывал такого поведения.

  1. Интересно, что если вы делаете следующие изменения:
  2. поставить центральную метку внутри данных-роли: содержание,
  3. заменить pageinit для pageshow.
  4. выполните поиск вашего iem следующим образом: внутри либо на странице, либо на странице (а не на настройке).

>

var elem = $("[data-role='page']:last").find('#book img'); // others may use $.mobile.activePage 

if (elem.length) { 
    // check height or img width here... 
} 
Смежные вопросы