Javascript 单击链接时使屏幕变暗，然后重定向

我有以下几点

我想要的是，当用户单击页面上的任何链接时，使用class

map

慢慢隐藏图像，并平滑地显示黑色背景，然后返回到其通常的行为，将用户重定向到下一页

我猜

preventDefault（）

是这里的解决方案，再加上一些CSS，比如：

.hideImg{ 
 opacity: 0; 
 visibility: hidden;
 -webkit-transition: visibility 0.3s linear,
 opacity 0.3s linear;
 -moz-transition: visibility 0.3s linear,
 opacity 0.3s linear;
 -o-transition: visibility 0.3s linear,
 opacity 0.3s linear; 
}

body{
background-color:#000;
}

但是，我无法让它们一起工作，并创建一个JS，等待隐藏动画发生，然后重定向

---

如何实现这一点？

您可以向保存图像的容器添加一个类。 并在进入新页面之前添加额外的超时

$（.x”）。在（'click'，函数（e）{
e、 预防默认值（）；
$（'div'）.addClass（'darken'）；
setTimeout（函数（）{
window.location.href=https://www.google.com“；//这将在2s后导航到新页面
}, 2000);
});
正文{
背景：黑色；
}
.warpper地图{
宽度：500px；
高度：200px；
}
地图{
宽度：100%；
身高：100%；
}
.变黑{
不透明度：0；
过渡：不透明度2s轻松；/*使过渡平滑*/
/*您可以增加时间，使转换更长*/
}
尝试以下方法：


$（'a'）。在（'click'）上，函数（e）{
e、 预防默认值（）；
var href=$（this.attr（'href'）；
//一项
$（'.map'）.animate（{“不透明”：“0”}，1000，function（）{
window.location.href=href；
});
//或者，对于多个类，所有类都做相同的事情
$（'.map、.other item、.other class'）。动画（{“不透明”：“0”}，1000，function（）{
window.location.href=href；
});
});
我认为这应该可以为您使用jQuery完成工作：

$('a').on('click',function(e){
    e.preventDefault;
    $(this).addClass('hideImage');
    $('.hideImage').on('animationend webkitAnimationEnd',function(){
        window.location.href = $(this).attr('href');
    })
});

或者只是告诉你如何修复它。

祝你好运
你是从0开始做的？这太酷了。你可以使用过渡结束事件：@SilverSurfer实际上不是从0开始的，所以和谷歌是很好的盟友。谢谢大家!@是的，这似乎是在正确的方向，但不幸的是，我不知道如何将这个解决方案应用到我的问题上，因为我真的很烂JS。这就像一个魅力。如果我想隐藏两个元素而不是一个元素，那么我必须重复此部分$（'.map'）。动画（{“不透明度”：“0”}，1000，function（）{window.location.href=href；}）；更改类名，对吗？是的，如果你想让他们做不同的事情。或者-只需使用$（'.map，.other class'）。。。（见最新答案。）