问仅在页面加载时使用jQuery动画
EN

Stack Overflow用户

提问于 2014-01-03 15:05:38

回答 3查看 2.2K关注 0票数 0

我有一个网站，我动画的背景，当我加载页面。我的每个页面都有这样的结构：

<?php require 'Top.php'; ?>
<!--Page content-->
<?php require 'Bottom.php'; ?>

Top.php看起来如下所示：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>

<link href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

<script src="js/animate.js"></script>

<title>Untitled Document</title>
<link href="css/styles.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="content">
    <div id="net">
        <div id="net-image"></div>
        <div id="lines"></div>
        <div id="logo"><h1>AVBELJ</h1><h2>PEČARSTVO</h2></div>
        <div class="square" id="st1"></div>
        <div class="square" id="st2"></div>
        <div class="square" id="st3"></div>
        <div class="square" id="st4"></div>
        <div class="square" id="st5"></div>
        <div class="square" id="st6"></div>
        <div class="square" id="st7"></div>
        <div class="square" id="st8"></div>
        <div class="square" id="st9"></div>
        <div class="square" id="st10"></div>
        <div class="square" id="st11"></div>
        <div class="square" id="st12"></div>
        <div class="square" id="st13"></div>


        <!--<img draggable="true" id="snowman" src="images/temenKvadrat.png" alt="snowman" style="position: absolute; left: 50px; top: 120px; z-index: 200;">-->


        <nav id="menu">
            <ul id="mainlevel">
                <li><a href="about.php"><img src="images/about.png" border="0" alt="O NAS"></a></li>
                <li><a href="items.php"><img src="images/items.png" border="0" alt="IZDELKI"></a></li>
                <li><a href="gallery.php"><img src="images/gallery.png" border="0" alt="GALERIJA"></a></li>
                <li><a href="references.php"><img src="images/references.png" border="0" alt="REFERENCE"></a></li>
                <li><a href="contact.php"><img src="images/contact.png" border="0" alt="KONTAKT"></a></li>
            </ul>
        </nav>

animate.js以window.load开头：

$(window).load(function() {
    $("#lines").slideDown(2500);
    $('#net-image').delay(2000).fadeIn(1000);
    $("#logo").delay(3000).animate({left: "0px"}, 2000);
    $(".square").delay(3000).show("scale",{}, 1000);
})

我的问题是，只有当我第一次加载页面时，我才能使动画发生。现在，每当单击新菜单项时，它都会产生动画效果。我如何改变它，以便当一个菜单项被点击，动画不会发生。

非常感谢您的帮助！

jquery

animation

腾讯云会员中心

加入腾讯云会员，每月可领会员专属优惠券；会员云产品免费体验；云产品会员专享价；会员签到抽奖…

回答 3

Stack Overflow用户

回答已采纳

发布于 2014-01-03 15:12:37

使用：

<?php
if (!isset($_COOKIE['first_time']))
{
    setcookie("first_time", "no");
?>
<script>// Your JavaScript here </script>
<?php
}
?>

第一行检查“first_time”字段是否设置在名为'$_COOKIE‘的关联数组中(当然代表饼干)。如果没有设置，这将是用户第一次请求您的页面。因此，通过设置cookie，您将防止它们再次运行脚本。

票数 1

Stack Overflow用户

发布于 2014-01-03 15:12:32

如果您只希望动画发生在您的顶层页面上，而您的站点上没有其他页面，那么您有以下选项：

仅包括顶层页面上动画的代码。
让代码检查它是否在顶层页面上(它可以检查window.location.pathname)，并且只有在当前URL是您域的顶层(例如主页，而不是菜单指向的页面)时才启动动画。

如果您只希望当用户第一次到达您的站点时(在任何页面上)，则可以在完成动画一次之后在LocalStorage中设置cookie或设置一个值，然后在随后的页面中检查该值，这样就不会再次显示动画。您可以控制cookie的过期，或者在LocalStorage中设置最后一次访问的值，以确定何时再次动画。

票数 2

Stack Overflow用户

发布于 2014-01-03 15:07:27

您需要设置一个cookie，或者只在起始页面中包含动画脚本。

对于cookie，您只需在访问页面时将其设置即可。在您的Top.php文件中：

<?php
if (!isset($_COOKIE["a_meaningful_name_for_the_animation"]):
    setcookie("a_meaningful_name_for_the_animation", true);
?>
    <script src="js/animate.js"></script>
<?php endif; ?>