Показывать текст динамически при загрузке страницы с помощью jquery

Question

Мне нужно динамически показывать текстовые сообщения, как только я захожу на свой сайт заново, используя jquery, который должен быть там в течение определенного периода времени и отдан другому заполнителю. это то, что хочет начать слева и показать сообщение и отдохнуть на правой стороне. который похож на эффект анимации. Любой, пожалуйста, помогите мне сделать с помощью jquery.

Answer 1

Это предполагает, что у вас есть место, где вы хотите, чтобы сообщение находилось по истечении определенного периода времени. В моем примере это DIV с идентификатором dock. Для этого используется диалоговый виджет jQuery UI. Это также позволяет пользователю закрыть его - в этот момент он автоматически стыкуется. Обратите внимание, что это не делает никакой анимации сообщения. Таймер позаботится о закрытии диалога, если пользователь не закрыл его.

<div id="startMessage" title="Attention" style="display: none;">
  <p>Your message here</p>
</div>

<script type="text/javascript">
    $(function() {
        $('#startMessage').dialog({
            modal: true,
            autoOpen: true,
            draggable: false,
            resizeable: false,
            buttons: {
               'Close' : function() { $(this).dialog('close'); }
            },
            close: function() {
                 $(this).find('p').appendTo('#dock');
                 $(this).dialog('destroy');
            }
        });

        setTimeout( function() { $('#startMessage').dialog('close') }, 10000 );
    });
</script>

Если вы хотите анимировать сообщение, вы можете попробовать изменить закрытый обратный вызов на:

function() {
   var $dock = $('#dock');
   var position = $dock.offset();
   var $dialog = $(this);
   $dialog.animate( { top: position.top, left: position.left, height: 0, width: 0 }, function() {
       $dialog.find('p').appendTo( $dock );
       $dialog.dialog('destroy');
   });
});

При этом верхний левый угол диалогового окна переместится в верхний левый угол док-станции, а затем исчезнет без изменения размера. Когда он доберется до дока, он должен был исчезнуть. В этот момент он берет элемент абзаца из диалогового окна, добавляет его в док и удаляет диалоговое окно и его обработчики.

Все вышеперечисленное непроверено. Отрегулируйте при необходимости.