javascript - 元素悬停时闪烁，同时尝试在同一事件中缩小其大小

Question

$myPseudoEl.on({
    mouseenter: function (e) {
            $(this).animate({
                'width': '50%'
            }, 50);
        }
    },
    mouseleave: function (e) {
          $(this).animate({
              'width': '70%'
          }, 50);
        }
    }
});

这是一个JSFiddle看看它的实际效果。要重现它，只需确保您从侧面(即从右和左)将光标输入到元素内。我知道为什么会发生这种情况，只是想要一个优雅的解决方案。

Answer 1

我会将它包装在包装元素中:

 var $el = $('#wrapper')
 var $wrapper = $el.find('.handle-content');

 var changeContent = function(content) {
   $wrapper.fadeOut(50, function() {
     $wrapper.html('<span class="handle-content">' + content + '</span>').fadeIn(50);
   });
 };

 var labelChanger = function(off, on) {
   $el.off('mouseenter').off('mouseleave');
   $el.on({
     mouseenter: function(e) {
       changeContent(on);
       $(this).find('.book-button-handle').animate({
         'width': '50%',
         'height': '15px',
         'color': 'white',
         'background-color': 'black'
       }, 50);
       $('.log').append('<li>enter</li>');
     },
     mouseleave: function(e) {
       changeContent(off);
       $(this).find('.book-button-handle').animate({
         'width': '100%',
         'height': '15px',
         'color': 'black',
         'background-color': 'white'
       }, 50);
       $('.log').append('<li>leave</li>');
     }
   });
 };


 labelChanger("+", "more options");

#wrapper {
  margin: 10px auto 0px;
  width: 70%;
  height: 15px;
  background: yellow;
}
.book-button-handle {
  margin: 0 auto;
  width: 100%;
  height: 15px;
  border: 1px solid silver;
  font-size: 10pt;
  line-height: 15px;
  color: black;
  text-align: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='wrapper'>
  <div class="book-button-handle">
    <span class="handle-content"> + </span>
  </div>
</div>

<ul class="log">
</ul>