如何摆动动画

Question

我正在创建一个黄色的悬停区域，当鼠标在这个区域周围盘旋时，事件：一个标签出现在这个悬停区域中。但当我把鼠标放在那里时，标签开始出现并摇晃 但我不知道如何让摇晃错误消失

这是我的代码

＆＃13;

＆＃13;

$(document).ready(function () {
    $('#demo').mouseleave(function(event) {
        $('.tab').stop().animate({
            opacity : '0.5',
            marginLeft: '190px', 
      width:'0px'
        }, 600, function() {        //animation complete
            $('#demo').addClass('hovered');
        });
    });
    $('#demo').mouseover(function(event) {
        $('.tab').stop().animate({
            opacity : '1',
            marginLeft: '0px', width:'190px'
        }, 300, function() {        //animation complete
            $('#demo').removeClass('hovered');
        });
    });
});

＆＃13;

#demo {
    padding: 5px;
    font-size: 18px;
    text-align: center;
    background-color: #555;
    color: white;
    border: solid 1px #666;
    border-radius: 3px;
    position:absolute;
    margin-left: 10px;
    width:190px;
    height:100%;
    opacity: 0.5;
    background-color: yellow;
}
#demo.hovered {
    backgound-color: #000;
}
.tab {
    margin-left: 190px;
    width: 0px;
    height:100%;
    opacity: 0.5;
    background-color: #876;
    position:absolute;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="demo">Hover here!</button>
<div class="tab">First Panel</div>

＆＃13;

＆＃13;

＆＃13;

有谁帮我这个？我是一个javascript初学者

Answer 1

我没有在mouseleave上触发#demo事件，而是在mouseleave点击.tab事件

$(document).ready(function() {
  $('.tab').mouseleave(function(event) {
    $('.tab').stop().animate({
      opacity: '0.5',
      marginLeft: '190px',
      width: '0px'
    }, 600, function() { //animation complete
      $('#demo').addClass('hovered');
    });
  });
  $('#demo').mouseover(function(event) {
    $('.tab').stop().animate({
      opacity: '1',
      marginLeft: '0px',
      width: '190px'
    }, 300, function() { //animation complete
      $('#demo').removeClass('hovered');
    });
  });
});

#demo {
  padding: 5px;
  font-size: 18px;
  text-align: center;
  background-color: #555;
  color: white;
  border: solid 1px #666;
  border-radius: 3px;
  position: absolute;
  margin-left: 10px;
  width: 190px;
  height: 100%;
  opacity: 0.5;
  background-color: yellow;
}

#demo.hovered {
  backgound-color: #000;
}

.tab {
  margin-left: 190px;
  width: 0px;
  height: 100%;
  opacity: 0.5;
  background-color: #876;
  position: absolute;
}

`
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="demo">Hover here!</button>
<div class="tab">First Panel</div>

Answer 2

这是因为你只在黄色矩形上触发悬停，当标签出现时你停止悬停黄色矩形。在我的解决方案中，您还需要在mouseleave()上触发.tab事件。

$(document).ready(function() {
  $('#demo').mouseleave(function(event) {
    $('.tab').mouseleave(function(event) { //add this line
      $('.tab').stop().animate({
        opacity: '0.5',
        marginLeft: '190px',
        width: '0px'
      }, 600, function() { //animation complete
        $('#demo').addClass('hovered');
      });
    });  //add this line
  });
  $('#demo').mouseover(function(event) {
      $('.tab').stop().animate({
        opacity: '1',
        marginLeft: '0px',
        width: '190px'
      }, 300, function() { //animation complete
        $('#demo').removeClass('hovered');
      });
    });
});

#demo {
  padding: 5px;
  font-size: 18px;
  text-align: center;
  background-color: #555;
  color: white;
  border: solid 1px #666;
  border-radius: 3px;
  position: absolute;
  margin-left: 10px;
  width: 190px;
  height: 100%;
  opacity: 0.5;
  background-color: yellow;
}

#demo.hovered {
  backgound-color: #000;
}

.tab {
  margin-left: 190px;
  width: 0px;
  height: 100%;
  opacity: 0.5;
  background-color: #876;
  position: absolute;
}

`
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="demo">Hover here!</button>
<div class="tab">First Panel</div>

Answer 3

您是否希望选项卡上有任何用户互动？

如果没有，那么我会将pointer-events: none;属性添加到您的.tab课程中。

然后mouseleave事件不会触发，但您无法在tab元素中使用任何鼠标事件。