动画活动(悬停)缩略图不透明度的画廊与jquery

Animating active (hovered) thumbnail opacity in a gallery with jquery

本文关键字：jquery 不透明度 略图 活动 悬停 动画      更新时间：2023-09-26

我正在尝试动画不透明度。所有缩略图的默认不透明度为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.c urcurrentttarget)只适用于这1个缩略图，那么当我不离开缩略图时，为什么会触发该缩略图的鼠标退出事件?

有什么办法解决这个问题吗?

谢谢,韦斯利

我理解你的意思了吗?你不想有鼠标离开的效果?只有当悬停不同的缩略图?

第一次尝试应该将"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 :)
  }
});
相关文章：