制作一个不带HTML a标记但在动画播放完毕后指向其他页面的超链接

Make an hyperlink to an other page without the HTML a-tag, but after an animation finished playing

本文关键字：播放 动画 超链接 其他 一个 HTML      更新时间：2023-09-26

我想制作一个网页横幅，并希望它有一个到其他页面的超链接。

听起来很容易？是的，但我不能使用HTML标记，因为我不想转到由单击事件启动的其他页面。

我想在动画播放完毕后链接到另一个页面。

我希望有一个JS解决方案（如果可能的话）。

所以：

第一：我想拖放一个html元素，

第二：我想播放一个CSS/JS动画，

第三：我想超链接到另一个页面，（这是需要帮助的部分）。

我没有任何代码，也不要求为我写，我只想知道如何在不点击的情况下制作超链接。

我在这里找到了一个类似的问题，但它没有涵盖我想要的内容。我想在用户交互后进行链接。

您设置了window.location.href="http://www.stackoverflow.com";

下面是一个使用jQuery在动画结束时执行此操作的示例。

JavaScript

$("#startAnimation").on('click',function(){
  $("#bunny").slideDown(1000,function(){
    window.location.href="http://www.stackoverflow.com";
  });
});

CSS

#bunny {  
  display:none;
}

HTML

  <div id="bunny"><img src="http://i.guim.co.uk/static/w-620/h--/q-95/sys-images/Guardian/Pix/pictures/2010/8/5/1281041145130/Farms-wildlife-schemes-bo-006.jpg"/></div>
<div>
    <button id="startAnimation" type="button">Start animation</button>
</div>

请参阅JSBin

动画播放完成后，您可以运行一个脚本，将用户重定向到另一个页面：

window.location.html='your_page.html'；

相关文章：