Question

我有2张图片，其中不透明度设置为0.2：

当我将鼠标悬停在div上时，我希望将2个图像的不透明度设为1，这是代码：

$(".comment-thread").live("mouseover", function () {


    $(this).find('.comment-rating-down').animate({ opacity: 1 }, 500);
    $(this).find('.comment-rating-up').animate({ opacity: 1 }, 500);

}）;

$（“。comment-thread”）。live（“mouseout”，function（）{

    $(this).find('.comment-rating-down').animate({ opacity: 0.2 }, 500);
    $(this).find('.comment-rating-up').animate({ opacity: 0.2 }, 500);

}）;

当我将鼠标悬停在div上时，2个按钮会闪烁4次，就像它正在缓冲动画一样。

有更好的技术吗？

由于

Answer 1

使用“mouseenter”“mouseleave”事件，鼠标悬停和mouseout多次触发。

还将动画链接到.stop函数

$（本）.find（ '评评下'）。停止（真，真）.animate（{ 不透明度：1}，500）; $（this）.find（'。comment-rating-up'）。stop（true，true）.animate（{opacity：1}，500）;

.stop函数有助于防止多个动画排队，例如，如果您将图像鼠标移出/移出多次，您将获得持续一段时间的动画。

http://api.jquery.com/stop/

Answer 2

.hover（）怎么样？

$(".comment-thread").hover(function(){
  var t = $(this);
  t.find('.comment-rating-down').stop().animate({opacity: 1 }, 500);
  t.find('.comment-rating-up').stop().animate({opacity: 1 }, 500);
},function(){
  var t = $(this);
  t.find('.comment-rating-down').stop().animate({opacity: 0.2 }, 500);
  t.find('.comment-rating-up').stop().animate({opacity: 0.2 }, 500);
});

使用鼠标悬停和鼠标悬停事件动画显示图像的不透明度

2 个答案: