html – 点击javascript时淡出div：history.back()

概述我已经加载了一个fadeIn css动画,但当我点击关闭按钮时,该块(自然)会在闪光灯中消失.有没有办法在用户点击“关闭”-link(带有值 javascript：history.back())时反转动画？ Demo #showme:target { display: block; position: fixed; width: 100%; height: 100%; 我已经加载了一个fadeIn CSS动画,但当我点击关闭按钮时,该块(自然)会在闪光灯中消失.有没有办法在用户点击“关闭”-link(带有值 javascript：history.back())时反转动画？

Demo

#showme:target {    display: block;    position: fixed;    wIDth: 100%; height: 100%;    top: 0; left; 0;    background: lightblue;    -webkit-animation: fadein 1s; /* Safari,Chrome and Opera > 12.1 */       -moz-animation: fadein 1s; /* firefox < 16 */        -ms-animation: fadein 1s; /* Internet Explorer */         -o-animation: fadein 1s; /* Opera < 12.1 */            animation: fadein 1s;}

解决方法 我会将jquery用于动画部分,但我不确定为什么要将此动画与history.back()一起使用.以下解决方案也消除了大量额外的CSS.

HTML：

<div ID="showme" >    <p>I'm showing</p>    <p><a href="#" ID="close">Close</a></p></div><div ID="wrapper">    <a ID="show" href="#">Show</a></div>

Js：

$('#close').on('click',function(event) {    event.preventDefault();    $('#showme').fadeOut('slow');});$('#show').on('click',function(event) {    event.preventDefault();    $('#showme').fadeIn('slow');});

CSS：

body {margin: 0;}#showme {    display: block;    position: fixed;    wIDth: 100%; height: 100%;    top: 0; left; 0;    background: lightblue;}

小提琴：http://jsfiddle.net/cmqg7cyf/4/

总结

以上是内存溢出为你收集整理的html – 点击javascript时淡出div：history.back()全部内容，希望文章能够帮你解决html – 点击javascript时淡出div：history.back()所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。