Установите непрозрачность от 0 до 1 при загрузке страницы

0

Я пытаюсь написать страницу, где он загружает несколько объектов в установленном порядке с использованием JavaScript. Мне удалось сделать объекты мигающими с помощью CSS3, но не совсем уверен, как объединить его с таймером в JavaScript.

вот мой код:

<script language="javascript">
$(document).ready(function () {
var t;
function blink(){
    $("#blinkfirst").setOpacity(0);
    $("#blinkfirst").setStyle({visibility: 'visible'});
    new Effect.Opacity(
    "#blinkfirst", { 
        from: 0.0, 
        to: 1.0,
        duration: 1.0
     }
 );
}

function appear(){
t=setTimeout('blink()', 8);
}
});
</script>

моя логика заключается в том, чтобы написать одну функцию, чтобы изменить непрозрачность div от 0.0 до 1.0, чтобы она отображалась. а затем записать другую функцию для вызова этой функции через каждые определенные секунды для разных объектов. например, make div1 появляется первым, а через 8 секунд появляется div2; Через 8 секунд появляется div3...

  • 0
    Какую библиотеку вы используете? Это не стандартные функции jquery.
  • 1
    Больше похоже на mootools, чем на jQuery
Показать ещё 2 комментария
Теги:
opacity

3 ответа

1
Лучший ответ

Кажется, что много кода, чтобы угаснуть. Это, вероятно, упростит ситуацию. Добавьте класс "blink" к каждому элементу, который вы хотите применить, и дополнительный класс "load-0" и т.д., Чтобы указать порядок.

$('.blink').fadeTo(0,0).each(function(i) {//initial fadeout, then blink loop
    var bk = $(this);//can i get a blink?
    if ($('.load-0').length) { bk = $('.load-'+i); }//load ordering support
    bk.delay(i*2000).animate({opacity: '1'}, 1000);//animate [delay,opacity,duration]
});

Сначала они скроют их, а затем уйдут через 2 секунды друг от друга.

сделал скрипку: http://jsfiddle.net/filever10/nw8kM/

Поделиться
  • 0
    Спасибо! это работает! мой вопрос заключается в том, как бы я применить это к нескольким div? например, теперь div #blinkfirst вызывает эту функцию. Должен ли я поместить другие идентификаторы внутри класса и вызвать эти функции? например, .blink #first, .blink #second, .blink #third ... $ ('. blink') ...
  • 0
    это будет проходить через все div с классом "blink" в порядке синтаксиса. Вы можете добавить атрибут или класс, чтобы определить порядок, и использовать i, чтобы влиять на них в нужном вам порядке. поэтому добавляем дополнительный класс «load-0» и т. д. к каждому. затем измените 3-ю строку на $ ('. load -' + i) .delay (i * 8000) .animate ({opacity: '1'}, 1000);
Показать ещё 4 комментария
0

Используйте следующий code-

<script language="javascript">
$(document).ready(function () {
var t;
function blink(){
    $("#blinkfirst").setStyle({opacity: '0'});
    $("#blinkfirst").setStyle({visibility: 'visible'});
    new Effect.Opacity(
    "#blinkfirst", { 
        from: 0.0, 
        to: 1.0,
        duration: 1.0
     }
 );
}

function appear(){
t=setTimeout('blink()', 8000);
}
});
</script>
Поделиться
0

Для эффекта мигания вы можете просто обернуть element с помощью функции setInterval и вызвать fadeIn/fadeOut jQuery на нем.

setInterval(function(){
    $('.blink').fadeIn(500).fadeOut(500);
}, 0);

Вот демонстрация в JSFiddle.

ОБНОВЛЕНИЕ 1:

Вот чистое решение для JavaScript.

var blink = document.getElementById('blink');

var timer = setInterval(function(){
    if(blink.style.display == 'none') {
        blink.style.display = 'block';
    } else {
        blink.style.display = 'none';
    }
}, 500);

Использование свойства CSS display для скрытия/отображения элемента.

Проверьте рабочую скрипку здесь.

ОБНОВЛЕНИЕ 2:

И вот фиксированное решение, использующее функцию jQuery animate().

var timer = setInterval(function(){
    $blink.stop().animate({
        opacity: 1
    }, 500, function() {
        $blink.animate({
            opacity: 0
        }, 500);
    });

    $blink.text($blink.queue( "fx" ).length);
}, 1000);

Проверьте рабочую скрипку здесь.

Поделиться
  • 2
    Это вырастет из-под контроля в спешке. Вы будете держать анимацию в очереди постоянно навсегда. Посмотрите это обновление для скрипки со счетчиком количества анимаций в вашей очереди. jsfiddle.net/uw8Ub/1
  • 0
    Спасибо за выделение этого. Так вы можете дать решение для этого? Должен ли я очистить очередь явно или уже есть хорошее решение?
Показать ещё 4 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню