1

我有以下悬停脚本适用于我的导航链接图像：

$("nav a").hover(
    function() {
        $(".current", this).animate({
            opacity: 1
        }, {
            duration: 300,
            specialEasing: {
                opacity: 'linear',
            },
});
    }, function() {
        $(".current", this).animate({
            opacity: 0
        }, {
            duration: 2000,
            specialEasing: {
                opacity: 'linear',
            },

});
});

我想知道如果用户将光标移出悬停 div 然后在原始动画完成之前返回到它，是否有一种截取动画的方法。如果用户将光标移回 div，我希望动画立即将 .current div 中图像的不透明度淡化为 1。

我希望这很清楚，并且很高兴得到任何帮助。

谢谢，

缺口

4

2 回答 2

2

您可以使用 jQuery 的stop()函数(info)来取消动画。将 enter 函数的第一行更改为：

    $(".current", this).stop().animate({

这会停止动画并立即将不透明度恢复为 1。

于 2011-10-22T16:51:16.850 回答
0

我过去完成类似事情的方式是通过在对象中存储对悬停元素的引用，并通过与悬停元素相关联的某种 ID 进行键控。

例如：

var hoveredElements = {previousId:null};
$("nav a").bind("mouseover mouseout",function(e) {
           if(e.type == "mouseover")
           {

              if(!hoveredElements.hasOwnProperty(this.id))
              {
                 hoveredElements[this.id] =  $(".current", this).animate({opacity:  1},300);
                 hoveredElements.previousId = this.id;
              }
              else if(hoveredElements.previousId == this.id)
              {
                if(hoveredElements.hasOwnProperty(this.id))
                {
                    hoveredElements[this.id].stop().css({opacity:1});
                } 
                else
                {
                  hoveredElements[this.id] = $(".current", this).css({opacity:1});
                }
              }
           }
           else
           {
             if(hoveredElements.hasOwnProperty(this.id))
             {
                 hoveredElements[this.id].animate({opacity:  0},2000,function(){
                    delete hoveredElements[this.id];
                 });
             }
           }
});

ID 当然不必是 HTML ID，只是一些唯一标识符（可能是元素本身）。

编辑：对不起，没有完全得到原来的问题！

于 2011-10-22T17:03:45.063 回答