代码之家 › 专栏 › 技术社区 › DustinL_G

jQuery动画坚持快速悬停

jquery-animate jquery javascript

DustinL_G · 技术社区 · 7 年前

如果将光标缓慢悬停在元素上,动画将正常工作。绿色层从左侧重叠,然后从顶部,黄色层与绿色层重叠。当鼠标离开元素时,该重叠应自行撤消,首先撤消黄色重叠,然后撤消绿色重叠。

但是,如果光标在其上悬停得太快,动画就会卡在黄色的重叠部分,直到您重新鼠标悬停,然后鼠标移出。我试着添加 .stop(false, true) 每个 .animate 我读到的方法解决了类似的问题,但这并不奏效。我试着把它拴在门前 .使有生气 .stop(true,true); .

如果鼠标悬停部分没有在光标离开元素之前完成,有没有办法阻止鼠标悬停部分触发?

$(document).ready(function() {
  $('#con').hover(
    function() { // handlerIn
      $('#crossX').animate({'width': '115px'}, function() {
        $('#crossY').animate({'height': '115px'})
      })
    },
    function() { // handlerOut
      $('#crossY').animate({'height': '15px'}, function() {
        $('#crossX').animate({'width': '15px'})
      })
    }
  )
});

#con {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 130px;
  height: 130px;
  overflow: hidden;
  //background-color: black;
}
#one {
  width: 100px;
  height: 100px;
  background-color: lightgrey;
  color:black
}
#crossX {
  position: absolute;
  top: 15px;
  left: 0px;
  width: 15px;
  height: 100px;
  background-color:  green;
  color: yellow;
}
#crossY {
  position: absolute;
  top: 0px;
  left: 15px;
  width: 100px;
  height: 15px;
  background-color:  yellow;
  color: white;
}
#black {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100px;
  height: 100px;
  border: 15px solid black;
  z-index: 10;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="con">
  <div id="one"></div>
  <div id="crossX"></div>
  <div id="crossY"></div>
  <div id="black"></div>
</div>

2 回复 | 直到 7 年前

Axel 7 年前

使用以下解决方案,可以保证“鼠标离开部分”仅在“鼠标进入部分”填满后运行,反之亦然。

此外,该脚本还考虑了以下情况:在快速用户操作时:“enter>leave>enter”状态保持不变,就好像用户没有完成“快速离开”。 所以实际上这应该是你想要达到的 (至少我希望如此)。

var mouseEnter = function() {
      // console.log('in');
      sPosition = 'in';
      if ( !mouseEnterIsDone || !mouseLeaveIsDone ) return mouseEnterIsWaiting = true;
      mouseEnterIsDone = false;
      $('#crossX').animate({'width':'115px'}, function(){
        $.when($('#crossY').animate({'height': '115px'})).then(function(){sanitizeAnimation('enter')})
      })
    },
    mouseLeave = function() {
      // console.log('out');
      sPosition = 'out';
      if ( !mouseEnterIsDone || !mouseLeaveIsDone ) return mouseLeaveIsWaiting = true;
      mouseLeaveIsDone = false;
      $('#crossY').animate({'height':'15px'}, function(){
        $.when($('#crossX').animate({'width': '15px'})).then(function(){sanitizeAnimation('leave')})
      })
    },
    sanitizeAnimation = function( sMode ){
      if ( 'enter' == sMode )
          mouseEnterIsDone = true;
      else
          mouseLeaveIsDone = true;
      if ( 'in' == sPosition ) {
        if ( mouseEnterIsWaiting ) {
          mouseEnterIsWaiting = false;
          mouseEnter();
        }
      } else {
        if ( mouseLeaveIsWaiting ) {
          mouseLeaveIsWaiting = false;
          mouseLeave();
        }
      }
    },
    mouseEnterIsDone = true,
    mouseLeaveIsDone = true,
    mouseEnterIsWaiting = false,
    mouseLeaveIsWaiting = false,
    sPosition = 'out';

$(document).ready(function(){
  $('#con').hover(mouseEnter, mouseLeave);
});

body {
  padding: 5%;
}

#con {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 130px;
  height: 130px;
  overflow: hidden;
  //background-color: black;
}
#one {
  width: 100px;
  height: 100px;
  background-color: lightgrey;
  color:black
}
#crossX {
  position: absolute;
  top: 15px;
  left: 0px;
  width: 15px;
  height: 100px;
  background-color:  green;
  color: yellow;
}
#crossY {
  position: absolute;
  top: 0px;
  left: 15px;
  width: 100px;
  height: 15px;
  background-color:  yellow;
  color: white;
}
#black {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100px;
  height: 100px;
  border: 15px solid black;
  z-index: 10;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="con">
  <div id="one"></div>
  <div id="crossX"></div>
  <div id="crossY"></div>
  <div id="black"></div>
</div>

如果你需要进一步的解释,请随时发表评论

Munkhdelger Tumenbayar 7 年前

$("#con").mouseenter(function() {
$('body').addClass('Hover');
     $('#crossX').stop().animate({'width':'115px'},500, function(){
     $('#crossY').stop().animate({'height': '115px'},500);
     });
      
});

$("body").mouseenter(function() {
$('body').addClass('Hover');
   	  $('#crossY').stop().animate({'height':'0px'},500,function(){
      $('#crossX').stop().animate({'width':'0px'},500);
     });
      
});

#con {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 130px;
  height: 130px;
  overflow: hidden;
  //background-color: black;
}
#one {
  width: 100px;
  height: 100px;
  background-color: lightgrey;
  color:black
}
#crossX {
  position: absolute;
  top: 15px;
  left: 0px;
  width: 15px;
  height: 100px;
  background-color:  green;
  color: yellow;
}
#crossY {
  position: absolute;
  top: 0px;
  left: 15px;
  width: 100px;
  height: 15px;
  background-color:  yellow;
  color: white;
}
#black {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100px;
  height: 100px;
  border: 15px solid black;
  z-index: 10;
}
body{
  background-color:#dcdcdc;
  height:500px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>
<div id="con">
  <div id="one"></div>
  <div id="crossX"></div>
  <div id="crossY"></div>
  <div id="black"></div>
</div>
</body>