使用 jquery 在画廊中动画活动（悬停）缩略图不透明度

发布于 2024-11-25 05:47:56 字数 637 浏览 0 评论 0原文

我正在尝试为不透明度设置动画。所有缩略图的默认不透明度均为 0.8。悬停后，不透明度会增加到 1，并在悬停另一个缩略图时返回到 0.8。

我已经尝试过这段代码：

container.delegate("a:has(img)", "mouseenter", function(e){
    $(e.currentTarget).stop(true, true).animate({opacity: 1}, options.thumbsopacityFadeTime);
}).delegate("a:has(img)", "mouseout", function(e){
    $(e.currentTarget).stop(false, true).animate({opacity: options.thumbsOpacity}, options.thumbsopacityFadeTime); 
);

但悬停的缩略图有时（大多数时候）会返回到默认的不透明度，即使鼠标仍然位于同一缩略图上并且没有移动。

我认为这与当前正在运行的动画有关，但我认为 $(e.currentTarget) 仅适用于这 1 个缩略图，那么为什么当我不离开时会为该缩略图触发鼠标移出事件缩略图？

关于如何解决这个问题有什么想法吗？

谢谢，韦斯利

原文

I'm trying to animate the opacity. Default opacity is 0.8 for all thumbnails. Once hovered, the opacity increases to 1 and should go back to 0.8 when another thumbnail is hovered.

I've tried this code:

container.delegate("a:has(img)", "mouseenter", function(e){
    $(e.currentTarget).stop(true, true).animate({opacity: 1}, options.thumbsopacityFadeTime);
}).delegate("a:has(img)", "mouseout", function(e){
    $(e.currentTarget).stop(false, true).animate({opacity: options.thumbsOpacity}, options.thumbsopacityFadeTime); 
);

but the hovered thumbnails sometimes (most of the time) goes back to the default opacity, even when the mouse is still over that same thumbnail and hasn't moved.

I assume this has something to do with the animations currently running and what not, but I thought $(e.currentTarget) would only apply to this 1 thumbnail, so why would a mouse out event be triggered for that thumbnail when I do not leave the thumbnail?

Any ideas on how to fix this?

Thanks,
Wesley

分享到QQ

分享到微博

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

发布评论

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

故人爱我别走 2024-12-02 05:47:56

我理解你的意思是你不想有鼠标移出效果吗？仅当悬停不同的缩略图时？

第一次尝试应该是将“mouseout”替换为“mouseleave”。如果没有帮助，请尝试其他方法：

var obj = container.find("a:has(img)");

obj.bind({
  mouseenter:function(){
    obj.stop().not(this).animate({opacity: options.thumbsopacity}, options.thumbsopacityFadeTime);
    $(this).animate({opacity: 1}, options.thumbsopacityFadeTime);
  },
  mouseleave:function(){
    // nothing :)
  }
});

Did I understand you that you don't want to have mouseout effect? Only when hovering different thumbnail?

FIrst attempt should be replacing "mouseout" to "mouseleave". If it doesn't help, try different way:

var obj = container.find("a:has(img)");

obj.bind({
  mouseenter:function(){
    obj.stop().not(this).animate({opacity: options.thumbsopacity}, options.thumbsopacityFadeTime);
    $(this).animate({opacity: 1}, options.thumbsopacityFadeTime);
  },
  mouseleave:function(){
    // nothing :)
  }
});

回复收藏 0 原文

~没有更多了~