Увядание в анимации

So. Я пытался создать простой фрагмент текста, который исчезает при загрузке страницы. Я исследовал много слышащими на переполнение стека, а также считали это:Увядание в анимации

http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_fadein

Я даже посмотрел в использовании window.onload, не говоря уже об этом:

<body onload="$("#fadein p.desktoptheme").delay(1000).animate({"opacity": "1"}, 700);">

Но замирание в не будет работать. Текст не отображается.

У меня есть непрозрачность для элемента, установленного как 0 (с использованием CSS).

<script type="text/javascript"> 

$("#fadein p.desktoptheme").delay(1000).animate({"opacity": "1"}, 700); 

</script>

Одна Moar вещь: текст, который помещается внутри тега <p class="desktoptheme"></p> генерируется с PHP. Возможно, PHP является серверной, а JavaSciprt - клиентской. Если да, то что я использую? Задержка? AJAX?

Любые мысли?

источник

2016-01-07 SuradMister

При использовании JQuery вы всегда хотите, чтобы положить DOM манипулирует кода jQuery's .ready(function()) или иначе ваш код будет срабатывать до того, как успешно загружена страница

Пример:

<script type="text/javascript"> 

$(document).ready(function() { 
    $("#fadein p.desktoptheme").delay(1000).animate({"opacity": "1"}, 700); 
}); 

</script>

Для более элегантное решение, вы также можете рассмотреть возможность использования анимации CSS, чтобы получить тот же эффект. Зайдите в this link для получения дополнительной информации о выцветании элементов с помощью CSS.

Чтобы разместить содержимое на стороне сервера на странице, созданной с помощью PHP, при условии, что ваш текст доступен до загрузки страницы, вам просто нужно выполнить эхо-переменную, смешанную с вашим HTML-кодом.

Пример:

<p class="desktoptheme"><?php echo "Hello world"; ?></p>

источник

2016-01-07 00:52:14 caulitomaz

Любой текст, который вы вставляете внутри вашего элемента с PHP уже будет там, когда работает JavaScript - как вы сказали, PHP является на стороне сервера, браузер на стороне клиента. Поэтому вам не нужно беспокоиться об этом.

Я вижу, что вы используете jQuery, поэтому вы должны смотреть на $(document).ready(). Эта функция выполняет некоторый javascript после того, как страница закончила загрузку. Например:

JS:

$(document).ready(function() { 
    $('.fadein').animate({'opacity' : 1}, 700); 
})

HTML:

<p class='fadein'> 
This is some text that will fade in. 
</p>

CSS:

.fadein { 
    opacity: 0; 
}

Вот JSFiddle, так что вы можете играть с ним немного. Обратите внимание, что класс абзаца (fadein) должен соответствовать вашему селектору jQuery $('.fadein') и вашему селектору css .fadein.

Fiddle

источник

2016-01-07 00:57:21 Schiem

Тем не менее, текст остается невидимым, даже с кодом, который работал в Fiddle. Следует отметить, что с этой страницей многое происходит с PHP, JavaScript и множеством CSS. Существует внешняя таблица стилей, но она не ссылается на непрозрачность для этого элемента. – SuradMister

Некоторые основные вещи, которые вы можете решить для устранения неполадок: введите 'console.log ('test');' внутри функции '$ (document) .ready()', затем проверьте консоль в Google Chrome, чтобы узнать, появляется ли она. Если нет, тогда что-то блокирует ваш javascript (также проверяйте наличие ошибок в консоли). Также щелкните правой кнопкой мыши-> проверить текст. Установлено ли оно 'opacity: 0' в стиле, или' display: none'? Вы также должны дважды проверить, чтобы ваши селекторы работали. В консоли введите свой селектор jQuery и убедитесь, что он получает правильный элемент. – Schiem

У меня есть функция, которая делает именно это.Он немного похож на jQuery fade(), но он является стандартным JavaScript и может использоваться с функцией обратного вызова или без нее.

/* fade.In(), fade.Out(): 
    el = element object 
    dur = duration milliseconds 
    fn = callback function 
*/ 
var fade = { 
    In: function(el, dur, fn) { 
     var time = Math.round(dur/10); 
     function fader(t, e, v) { 
      if (v < 1) { 
       e.style.opacity = v; 
       setTimeout(function() { 
        fader(t, e, parseFloat((v += 0.1).toFixed(2))); 
       }, t); 
      } else { 
       e.style.opacity = '1'; 
       if (fn) fn(); 
      } 
     } 
     if (el.style.display === 'none') el.style.display = 'block'; 
     el.style.opacity = '0'; 
     fader(time, el, 0); 
    }, 
    Out: function(el, dur, fn) { 
     var time = Math.round(dur/10); 
     function fader(t, e, v) { 
      if (v > 0) { 
       e.style.opacity = v; 
       setTimeout(function() { 
        fader(t, e, parseFloat((v -= 0.1).toFixed(2))); 
       }, t); 
      } else { 
       el.style.opacity = '0'; 
       e.style.display = 'none'; 
       if (fn) fn(); 
      } 
     }; 
     fader(time, el, 1); 
    } 
}; 

/* Usage */ 

var elem1 = document.getElementById('id1'); 
var elem2 = document.getElementById('id2'); 

// fade in with callback 
fade.In(elem1, 500, function() { 
    // ... do something after fade in ... 
}); 
// fade out without callback 
fade.Out(elem2, 666);

Работы лучше для относительно быстрых переходов: c.500ms + | - 200 (ish).

Для этого просто вызовите функцию fade.In() на выбранном элементе при загрузке страницы.

Надеюсь, что помогло. :)

источник

2016-01-07 01:08:21

Отъезд animate.css. Поместите это в вашей голове:

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.1/animate.css">

Затем добавьте

анимированный FadeIn

к классу:

<p class="desktoptheme animated fadeIn"></p>

Если вы хотите, чтобы оживить при прокрутке элемент выписка WOW.js

источник

2016-01-07 03:51:50

Я бы высоко рекомендую использовать js-библиотеку под названием velocity, чтобы помочь с анимацией css.

Если я следовать за вами правильно, это будет выглядеть примерно так ...

CSS

p.desktoptheme { 
    display: none; 
    opacity: none; 
}

JQuery

$(function(){ 
    $('p.desktoptheme').velocity('fadeIn', { 
     'duration': 300, 
     'delay': 1000, 
     'complete': function(){ 
      // all done! 
     } 
    }); 
});

источник

2016-01-07 04:06:32 Damon

Увядание в анимации

ответ

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