Question

编辑：现在提供的代码完全正常

我正在尝试进行特定的转换，但似乎找不到合适的方法。请先查看截图。我希望中间的徽标（这是一个链接img）（现在是一个糟糕的占位符）更大，以便在点击并淡入另一页时以黑色覆盖整个屏幕。我的页面一直坚持在点击链接时加载新页面，而不是使徽标更大或编译任何其他过渡。我已经搜索过但是互联网上的所有内容都会导致我不想使用的框架。这是否可能没有框架，或者我被判处使用它。

tl; dr：我希望转换发生在onclick上，然后加载新页面

下面提供了代码，虽然它只是几行。谢谢你们（如果你们中的任何人做过类似的事情，我宁愿选择一般的伪代码或想法，而不是直接的答案，想先尝试用一些帮助弄明白）初始页面的HTML：

<html>
 <head>
  <link rel="stylesheet" type="text/css" href="homepage.css">
  <script src="homepage.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
 </head>
 <body>
    <video autoplay muted loop  id="bgvid">
       <source src="tbdb.mp4" type="video/mp4">
    </video>
        <img id="logo" src="logoexample.png" height="500px" width="500px" class="centered"/>

 </body>
</html>

初始页面的JQUERY：

     $(document).ready(function() {
        $("#logo").click(function() {
           $(this).animate({
             height: '10000%',
             width: '10000%'
           }, 2000, function() {
              window.location = "questioninital.html";
           });
            });
             });

screenshot from the initial page

Answer 1

return false位置错误。它应该是：

$(document).ready(function(){
  $("a").click(function(){
    $("img").animate({
      height:'=100%',
      width:'=100%'
     });
      return false;
    });
});

这将阻止点击链接的默认操作。

在加载链接之前执行动画

1 个答案: