如何在 jQuery 中拦截不透明度转换？

发布于 2024-12-11 12:06:11 字数 650 浏览 0 评论 0原文

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

$("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。

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

谢谢，

尼克

原文

I have the following hover script which works on my nav link images:

$("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',
            },

});
});

I am wondering there is a way of intercepting the animation if the user moves the cursor out of the hover div and then back into it before the original animation has finished. If the user moves the cursor back into the div I would want the animation to fade the opacity of the image in the .current div to 1 immediately.

I hope this is clear, and would be glad of any help.

Thanks,

Nick

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

驱逐舰岛风号 2024-12-18 12:06:11

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

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

这将停止动画并立即将不透明度返回到 1。

You can use jQuery's stop() function (info) to cancel the animation. Change the first line of the enter function to this:

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

This stops the animation and immediately returns the opacity to 1.

回复收藏 0 原文

坠似风落 2024-12-18 12:06:11

我过去完成类似操作的方法是在对象中存储对悬停元素的引用，并通过与悬停元素关联的某种 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，只需一些唯一标识符（可以是元素本身）。

编辑：抱歉，没有完全明白原来的问题！

The way I've accomplished something like this in the past is by storing a reference to the hovered-over elements in an object, keyed off by some sort of ID associated with the element being hovered over.

For example:

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];
                 });
             }
           }
});

The ID of course doesn't have to be an HTML ID, just some unique identifier (could be the element itself).

Edit: Sorry, didn't quite get the original question!

回复收藏 0 原文

~没有更多了~