Текст постепенно исчезает со звуком и перезапускается - PullRequest
Новая
       18

Текст постепенно исчезает со звуком и перезапускается

0 голосов
/ 28 апреля 2011

если бы вы могли помочь мне с этим, я был бы очень благодарен!

У меня есть 10 маленьких кусочков текста. Я бы хотел, чтобы каждый постепенно появлялся, а потом исчезал. Когда каждый фрагмент текста достигает полной непрозрачности, я хочу, чтобы звучал звонок. После отображения всех десяти текстов я бы хотел, чтобы последний остановился и оставался статичным.

Мне также хотелось бы, чтобы пользователь перемещал мышь или использовал клавиатуру для появления сообщения «начать заново» и для повторения последовательности из 10 сообщений.

Возможно ли это в jquery?

Ответы [ 2 ]

0 голосов
/ 28 апреля 2011

Этого проще всего добиться, если использовать плагин jQuery sound и .fadeIn ()

Javascript: 

var loopRunning = false;
$(document).ready(function() {

    loopRunning = true;
    // start the first fade in
    fadeInToSound(1);

    // bind to mousemove or keypress
    $(document).bind('mousemove keypress', function() {
        if(!loopRunning) {
            loopRunning = true;
            $("#container .hidden").hide();
            $("#startAgain").show();
            // start the fades over again
            fadeInToSound(1);
        }
    });

});

/**
 * Handles fading in a single div of text and, if the ID passed in is less
 * then ten, recurses to fade the next div in.
 * If the ID is greater than one, stops the last sound
 */
function fadeInToSound(idNum) {
    // if this is not the first ID, stop the last sound
    if(idNum > 1) {
        $.fn.soundPlay({playerId: 'embed_player', command: 'stop'});
    }
    // fade in the div "text<idNum>"
    $("#text" + idNum).fadeIn(500, function() {
        // use the jQuery sound plugin to play the sound
        $.fn.soundPlay({url: 'music/bell.wav',
            playerId: 'embed_player',
            command: 'play'});
        // if this isn't the last ID, recurse to do the next one
        if(idNum < 10) {
            fadeInToSound(idNum + 1);
        } else {
            loopRunning = false;
            setTimeout("$.fn.soundPlay({playerId: 'embed_player', command: 'stop'});", 500);
        }
    });
}

HTML: 

<!-- The div to show the start again text -->
<div id="startAgain" class="hidden">Start Again</div>
<!-- The text divs -->
<div id="container">
    <div id="text1" class="hidden">Text 1</div>
    <div id="text2" class="hidden">Text 2</div>
    <div id="text3" class="hidden">Text 3</div>
    <div id="text4" class="hidden">Text 4</div>
    <div id="text5" class="hidden">Text 5</div>
    <div id="text6" class="hidden">Text 6</div>
    <div id="text7" class="hidden">Text 7</div>
    <div id="text8" class="hidden">Text 8</div>
    <div id="text9" class="hidden">Text 9</div>
    <div id="text10" class="hidden">Text 10</div>
</div>

CSS: 

.hidden {
    display: none;
}

Если ваши идентификаторы не имеют формы "text1", то вы можете поместить их в массив для доступа или найти какой-либо другой логический способ увеличить ваш счет.

0 голосов
/ 28 апреля 2011

Да, это возможно, вот несколько основных шагов.

...