Question

我有以下project。

我想要的是，当用户点击页面上的任何链接时，使用类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。

我怎样才能做到这一点？

Answer 1

您可以将类添加到容纳图像的容器中。在进入新页面之前添加额外的超时。

＆＃13;

$(".x").on('click', function(e) {
  e.preventDefault();
  $('div').addClass('darken');

  window.setTimeout(function() {
    window.location.href = 'https://www.google.com'; // this will navigate to the new page after 2s
  }, 2000);

});

＆＃13;

body {
  background: black;
}

.warpper-map {
  width: 500px;
  height: 200px;
}

img.map {
  width: 100%;
  height: 100%;
}

.darken {
  opacity: 0;
  transition: opacity 2s ease; /* Makes smooth transition */
  /* You can increase the time to make the transition much longer */
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<a class='x' href="#">Click to Darken</a>
<div class='wrapper-map'>
  <img class='map' src="https://sporedev.ro/pleiade/images/Lobby.jpg">
</div>

＆＃13;

Answer 2

尝试这样的事情：

＆＃13;

$('a').on('click', function(e) {
  e.preventDefault();
  var href = $(this).attr('href');
  
  // For one item
  $('.map').animate({"opacity": "0"}, 1000, function() {
    window.location.href = href;
  });
  
  // Or, for multiple classes - all doing the same thing
  $('.map, .another-item, .another-class').animate({"opacity": "0"}, 1000, function() {
    window.location.href = href;
  });
  
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<a href="http://www.google.com">Google</a>

<div class='map' style="background: black; width: 300px; height: 300px;"></div>

＆＃13;

Answer 3

我认为这应该使用jQuery为你做的工作：

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

或者只是告诉你如何解决它祝你好运

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

3 个答案: