JQuery анимация не анимация

Я работаю над веб-сайтом, который использует функцию анимации jquery для расширения веб-сайта из левого верхнего угла при его загрузке. Я не был тем, кто написал код для этой функции, поэтому я не слишком знаком с этим. Он работал в какой-то момент, но на данный момент он, похоже, не работает вообще. Я знаю, что файл .js загружается и запускается, потому что первый бит кода в нем представляет собой задержку времени, в которой отображается сообщение «Страница загружается». Но тогда он просто показывает загруженную страницу вместо того, чтобы анимировать страницу, появившуюся в верхнем левом углу и скользящую. Я включил CSS и помечаю также, хотя я не верю, что в этом проблема. Любая помощь будет оценена! Благодаря!JQuery анимация не анимация

Примечание: Мы используем Jquery версии 1.7.2

CSS-:

#builder 
    { 
     position:relative; 
     min-height:100%; 
     min-width:100%; 
     z-index:999; 
    }

JavaScript:

function hideIt() { 

    document.getElementById("wait").style.display = "none"; 

} 

setTimeout("hideIt()", 1000); 

function showIt() { 

    document.getElementById("builder").style.display = "block"; 
} 

setTimeout("showIt()", 2500); 

function build() { 
    $(document).ready(function() { 

     $("#builder").animate({ height: '0%', width: '0%' }, 1); 
     $("#builder").animate({ height: '100%', width: '100%' }, 2000); 


    }); 
}

Отметка вверх:

<body onLoad="build()"> 
<img src="wait.gif" id="wait" style="display:block;" />

wait.gif просто картина, которая говорит «страница загружается» ...

И страница заворачивают в них:

<div id="builder" align=center style="display:none;">

источник

2012-07-03 Blake

Если элемент #builder скрыт в течение 2,5 секунд до его показа, анимация будет завершена к моменту отображения элемента. Удалить функцию инлайн на OnLoad тела и попробовать:

function hideIt() { 
    $("#wait").hide(); 
} 

function showIt() { 
    $("#builder").show(2000); //should do somewhat the same as animating from the top left 
} 

$(function() { 
    setTimeout(hideIt, 1000); //no need to quote the functions and eval them 
    setTimeout(showIt, 2500); 
});

или просто

$("#wait").delay(1000).hide(10); 
$("#builder").delay(2500).show(2000)

источник

2012-07-03 01:02:55 adeneo

На самом деле это почти то, что они хотят, но это только анимация фонового изображения, а не весь контент на странице ... – Blake

Не совсем уверен, что вы подразумеваете под не анимированным контентом, это контент в элементе #builder, иначе он, конечно, не будет анимированным, или он просто не анимируется так, как вам хотелось бы? – adeneo

Я думаю, что это более чем вероятно проблема, некоторые из разметки, вероятно, необходимо изменить, мне придется посмотреть на нее завтра, поскольку я уже закончил работу на ночь, спасибо за помощь! – Blake

Попробуйте изменить свой код так:

$(document).ready(function() { 
    $('#wait').hide(1000, function(){ // hide the #wait 
     $("#builder").show().animate({ // then show, then animate #builder 
      height: '100%', 
      width: '100%' 
     }, 2000); 
    }); 
});

Боковое примечание: Помните, что когда вы используете проценты и элемент, содержащий #builder, также необходимо установить его ширину и ширину.

источник

2012-07-03 00:52:24 Joey

Я пробовал, но с этим Javascript никогда не миновали страницы загружается сообщение ... – Blake

я сделал правку в код. Кроме того, учитывая, что теперь вы вызываете 'build()' когда документ хорош и загружен, вы можете удалить атрибут onLoad из тега body. И: анимация происходит задолго до появления '# builder'. Я предполагаю, что вы хотите, чтобы он был приживлен в полном размере во время его первого появления? – Joey

Хорошо, я удалил загрузку с тега моего тела и заменил старый код на новый, но он все еще не проходит, когда страница загружается. – Blake

Вероятно, что он анимируется задолго до того, как вызывается show(). Таким образом, к моменту его отображения анимация будет выполнена.

источник

2012-07-03 00:52:42

JQuery анимация не анимация

ответ

Смежные вопросы