Question

我正在尝试为不透明度设置动画。所有缩略图的默认不透明度均为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缩略图，那么为什么我会触发该缩略图的鼠标输出事件不要留下缩略图？

有关如何解决此问题的任何想法？

谢谢，韦斯利

Answer 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 :)
  }
});

使用jquery在库中设置活动（悬停）缩略图不透明度的动画

1 个答案: