Question

我需要动态显示文本消息，一旦我使用jquery进入我的网站，并且应该在那里一定时间段并休息到某个地方持有者。这是想从左边开始并显示消息并在右侧休息。这类似于动画效果。任何人都可以帮助我使用jquery。

Answer 1

这假定您在某个时间段过去后，您希望邮件驻留在某个位置。在我的示例中，这是一个ID为dock的DIV。这使用了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');
   });
});

这会将对话框的左上角移动到停靠栏的左上角，同时将其淡化为无大小。当它到达码头时它应该已经淡出。此时，它从对话框中获取段落元素，将其附加到停靠栏，并删除对话框及其处理程序。

以上所有未经测试。根据需要进行调整。

使用jquery在页面加载时动态显示文本

1 个答案: