javascript - 更平滑的 JQuery 宽度变化

Question

我正在尝试为悬停 block 变大的菜单制作动画，而 sibling 正在为这种尺寸增加提供空间。所有 block 一起占据了整个窗口宽度。

我使用一些基本的 Jquery 成功地实现了这一点，但结果有点笨拙。 最右边的 div 受到所有计算和舍入的影响:

var width = $(window).width() - 44;
var blockwidth = width/12;
var blockwidthLarge = blockwidth+154;
var blockwidthSmall = blockwidth-14;
$('.headerblock').css('width',blockwidth+'px').hover(function()
   {
      $(this).siblings().stop(false,false).animate({width: blockwidthSmall},300);
      $(this).stop(false,false).animate({width: blockwidthLarge},300);

   },function()
   {
       $(this).siblings().stop(false,false).animate({width: blockwidth},300);
      $(this).stop(false,false).animate({width: blockwidth},300);

   });

这是一个有效的 jsfiddle(我建议将预览框架调整到更大的尺寸以增加效果的可见性):

jsfiddle

我该如何改进才能使盒子看起来稳定？也许这已经被开发出来了？ 该网站应该兼容 IE8+，所以我不能使用花哨的 css 规则。

Answer 1

有一个名为 hoverIntent 的 jQuery 插件通过 Brian Cherne这可能会解决您的问题。

基本上，它所做的只是在它认为用户确实打算悬停时触发悬停事件。与原版相比，它的流畅性稍逊，但效果很好，而且看起来很别致。

这是在“外部资源”下添加的插件的 fiddle

$('.headerblock').hover(function() {

更改为“.hoverIntent”

http://jsfiddle.net/Matze/c4uyR/1/

var width = $(window).width() - 44;
var blockwidth = Math.round(width / 12);
var blockwidthLarge = blockwidth + 154;
var blockwidthSmall = blockwidth - 14;
$('.headerblock').css('width', blockwidth + 'px').hoverIntent(function ()
{
    $(this).siblings().stop(false, false).animate({
        width: blockwidthSmall
    }, 300);
    $(this).stop(false, false).animate({
        width: blockwidthLarge
    }, 300);

}, function () {
    $(this).siblings().stop(false, false).animate({
        width: blockwidth
    }, 300);
    $(this).stop(false, false).animate({
        width: blockwidth
    }, 300);

});