如何延迟在鼠标按下时jquery隐藏直到CSS动画完成？

时间：2019-02-19 00:36:52

标签： javascript jquery animation events onmousedown

试图将菜单放在一起，并且在某种行为上遇到麻烦。

在主菜单div后面隐藏了一组子菜单div。单击后，将显示子菜单，并在视图中显示动画。

显示子菜单时，我可以看到动画，但是当它们切换回隐藏时，我看不到动画。我尝试了几种不同的方法来使其表现出我想要的方式，但并不高兴。

代码如下：

$(document).ready(function() {

$(document).on('mouseenter mouseleave', '.circle.hover-effect', function (event) {
  $(this).toggleClass("active", event.type === 'mouseenter');
});

$('.menu').hide();

	$('.circle').on('mousedown touchstart', function() {

    $('.circle').toggleClass('hover-effect');
    $(this).toggleClass('selected');
    $('.circle').not(this).removeClass('selected');

    if ($(this).hasClass('selected')) {
      $('.circle').not(this).addClass('behind');
      $(this).prev().show('fast');
			$(this).prev().find('.menu-item1').removeClass('menu-item-desel').addClass('menu-item1-sel');
			$(this).prev().find('.menu-item2').removeClass('menu-item-desel').addClass('menu-item2-sel');
    }
    else {
      $('.circle').removeClass('behind');
      $('.circle').prev().hide('fast');
      $(this).prev().find('.menu-item1').removeClass('menu-item1-sel').addClass('menu-item-desel');
      $(this).prev().find('.menu-item2').removeClass('menu-item2-sel').addClass('menu-item-desel');
    }

	});

});
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background: -ms-linear-gradient(90deg, #16222A 10%, #3A6073 90%); /* IE10 */
  background: linear-gradient(90deg, #16222A 10%, #3A6073 90%); /* W3C */
}

.grid {
  display: flex;
  flex-wrap: wrap;
  width: 90%;
  height: 450px;
  margin: auto;
  overflow: hidden;
  padding: 10px 10px;
}

.cell {
  flex-basis: 33.3%;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 2px solid transparent;
}

.cell::before {
  padding-bottom: 100%;
  display: block;
  content: '';
}

.menu {
  position: relative;
  top: 100px;
  left: 100px;
}

.menu-item {
  width: 60px;
  height: 60px;
  background-color: dimGray;
  border-radius: 50%;
  position: absolute;
  color: white;
  text-align: center;
  line-height: 70px;
  z-index: 19;
}

.menu-item a {
  color: white;
  transition: 0.35s;
}

.menu-item a:hover { color: black; }

.menu-item1 { transition: all 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55); }
.menu1 .menu-item1-sel { transform: translate(0px, 125px); }
.menu1 .menu-item2-sel { transform: translate(60px, 105px); }

.menu-item2 { transition: all 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.2s; }
.menu2 .menu-item1-sel { transform: translate(0px, 125px); }
.menu2 .menu-item2-sel { transform: translate(60px, 105px); }

.menu-item-desel { transform: none; }

.circle {
  position: relative;
  background: #ccc;
  border-radius: 50%;
  width: 200px;
  height: 200px;
  margin: 0 auto 1em;
  transition: all 0.3s;
  z-index: 20;
  cursor: pointer;
  opacity: 1;
}

.active { transform: scale(1.1); }

.selected {
  background: red;
  z-index: 20;
}

.behind {
  opacity: 0.1;
  z-index: 18;
  cursor: default;
  pointer-events: none;
}

.caption {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="//netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">
<div class="grid">
  <div class="cell col1">
    <div class="inner">
      <div class="menu menu1">
        <div class="menu-item menu-item1"><a href="/home.aspx"><i class="fa fa-user fa-2x"></i></a></div>
        <div class="menu-item menu-item2"><a href="/home.aspx"><i class="fa fa-graduation-cap fa-2x"></i></a></div>
      </div>
      <div class="circle hover-effect">
      <div class="caption">
        <h2>Header 1</h2>
        <h3>Subtitle 1</h3>
      </div>  
      </div>
    </div>
  </div>
  <div class="cell col1">
    <div class="inner">
      <div class="menu menu2">
        <div class="menu-item menu-item1"><i class="fa fa-envelope-o fa-2x"></i></div>
        <div class="menu-item menu-item2"><i class="fa fa-code fa-2x"></i></div>
      </div>
      <div class="circle hover-effect">
      <div class="caption">
        <h2>Header 2</h2>
        <h3>Subtitle 2</h3>
      </div>
      </div>
    </div>
  </div>
  </div>

这是小提琴：JSfiddle

任何帮助将不胜感激！谢谢，祝你有美好的一天！

1 个答案:

答案 0 :(得分：0)

  1. 添加隐藏div时的延迟。 Div应该先执行效果，然后再隐藏使用setTimeout
  

在等待指定的毫秒数后执行功能。

$(document).ready(function() {

$(document).on('mouseenter mouseleave', '.circle.hover-effect', function (event) {
  $(this).toggleClass("active", event.type === 'mouseenter');
});

$('.menu').hide();

	$('.circle').on('mousedown touchstart', function() {

    $('.circle').toggleClass('hover-effect');
    $(this).toggleClass('selected');
    $('.circle').not(this).removeClass('selected');

    if ($(this).hasClass('selected')) {
      $('.circle').not(this).addClass('behind');
      $(this).prev().show('fast');
			$(this).prev().find('.menu-item1').removeClass('menu-item-desel').addClass('menu-item1-sel');
			$(this).prev().find('.menu-item2').removeClass('menu-item-desel').addClass('menu-item2-sel');
    }
    else {
      $('.circle').removeClass('behind');
      $(this).prev().find('.menu-item1').removeClass('menu-item1-sel').addClass('menu-item-desel');
      $(this).prev().find('.menu-item2').removeClass('menu-item2-sel').addClass('menu-item-desel');
      setTimeout(function(){ $('.circle').prev().hide('fast'); }, 1000);
      
      
    }

	});

});
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background: -ms-linear-gradient(90deg, #16222A 10%, #3A6073 90%); /* IE10 */
  background: linear-gradient(90deg, #16222A 10%, #3A6073 90%); /* W3C */
}

.grid {
  display: flex;
  flex-wrap: wrap;
  width: 90%;
  height: 450px;
  margin: auto;
  overflow: hidden;
  padding: 10px 10px;
}

.cell {
  flex-basis: 33.3%;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 2px solid transparent;
}

.cell::before {
  padding-bottom: 100%;
  display: block;
  content: '';
}

.menu {
  position: relative;
  top: 100px;
  left: 100px;
}

.menu-item {
  width: 60px;
  height: 60px;
  background-color: dimGray;
  border-radius: 50%;
  position: absolute;
  color: white;
  text-align: center;
  line-height: 70px;
  z-index: 19;
}

.menu-item a {
  color: white;
  transition: 0.35s;
}

.menu-item a:hover { color: black; }

.menu-item1 { transition: all 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55); }
.menu1 .menu-item1-sel { transform: translate(0px, 125px); }
.menu1 .menu-item2-sel { transform: translate(60px, 105px); }

.menu-item2 { transition: all 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.2s; }
.menu2 .menu-item1-sel { transform: translate(0px, 125px); }
.menu2 .menu-item2-sel { transform: translate(60px, 105px); }

.menu-item-desel { transform: none; }

.circle {
  position: relative;
  background: #ccc;
  border-radius: 50%;
  width: 200px;
  height: 200px;
  margin: 0 auto 1em;
  transition: all 0.3s;
  z-index: 20;
  cursor: pointer;
  opacity: 1;
}

.active { transform: scale(1.1); }

.selected {
  background: red;
  z-index: 20;
}

.behind {
  opacity: 0.1;
  z-index: 18;
  cursor: default;
  pointer-events: none;
}

.caption {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="//netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">
<div class="grid">
  <div class="cell col1">
    <div class="inner">
      <div class="menu menu1">
        <div class="menu-item menu-item1"><a href="/home.aspx"><i class="fa fa-user fa-2x"></i></a></div>
        <div class="menu-item menu-item2"><a href="/home.aspx"><i class="fa fa-graduation-cap fa-2x"></i></a></div>
      </div>
      <div class="circle hover-effect">
      <div class="caption">
        <h2>Header 1</h2>
        <h3>Subtitle 1</h3>
      </div>  
      </div>
    </div>
  </div>
  <div class="cell col1">
    <div class="inner">
      <div class="menu menu2">
        <div class="menu-item menu-item1"><i class="fa fa-envelope-o fa-2x"></i></div>
        <div class="menu-item menu-item2"><i class="fa fa-code fa-2x"></i></div>
      </div>
      <div class="circle hover-effect">
      <div class="caption">
        <h2>Header 2</h2>
        <h3>Subtitle 2</h3>
      </div>
      </div>
    </div>
  </div>
  </div>

相关问题
最新问题