閃爍的元素，同時試圖收縮它的大小在同一事件

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>

Answer 2

試試這個。

var $el = $('.book-button-handle') 
 
var $wrapper = $el.find('.handle-content'); 
 
var enter = false; 
 
var exit = false; 
 

 
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) { 
 
      if (!$(this).is(':animated') && !enter){ 
 
      \t changeContent(on); 
 
      $(this).animate({ 
 
       'width': '50%', 
 
       'height': '15px', 
 
       'color': 'white', 
 
       'background-color': 'black' 
 
      }, 50); 
 
      $('.log').append('<li>enter</li>'); 
 
      enter=true; 
 
      exit=false; 
 
      } 
 
     }, 
 
     mouseleave: function (e) { 
 
     \t if (!$(this).is(':animated') && !exit){ 
 
      changeContent(off); 
 
      $(this).animate({ 
 
       'width': '70%', 
 
       'height': '15px', 
 
       'color': 'black', 
 
       'background-color': 'white' 
 
      }, 50); 
 
      $('.log').append('<li>leave</li>'); 
 
      enter=false; 
 
      exit=true; 
 
      } 
 
     } 
 
    }); 
 
}; 
 

 

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

.book-button-handle { 
 
    margin: 10px auto 0px; 
 
    width: 70%; 
 
    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/1.9.1/jquery.min.js"></script> 
 
<div class="book-button-handle"> <span class="handle-content"> + </span> 
 

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

• 我加if (!$(this).is(':animated'))防止 觸發事件，而這是以前的動畫下。
• 我加了if (exit) & if (enter)防止觸發兩次 輸入/離開元素相同的事件。