javascript - jQuery总是重复功能

Question

我有这两个功能来创建不透明效果

<script>
    function trans(id)
    {
       $(".pris_"+id).stop().fadeOut(1000);
       $(".pris_"+id).css({ opacity: 0.1});
       stop();
    }

    function trans_reverse(id)
    {
       $(".pris_"+id).stop().fadeIn(1000);
       $(".pris_"+id).css({ opacity: 0.8});
       stop();
    }
</script>


<div id="productos_image_soon" class="pris_1"    onmouseover="trans('1');"onmouseout="trans_reverse('1');">
   Product in a few time
</div>

进入 div 我调用每个函数，问题是当我将鼠标悬停在 div 上并在递归模式下执行第二个函数并在第一个函数之后继续执行时，效果是当鼠标悬停不透明度低和鼠标悬停不透明度增加时

工作.....这里jsfiddle.net/dSesq/

我不知道为什么会这样，我尝试了 stop() 函数，但问题仍然存在

Answer 1

为什么在淡入后设置元素的不透明度是没有意义的。使用fadeTo！

function trans(id, opacity) {
    $(".pris_"+id).stop().fadeTo( 1000, opacity);
}

你可能应该使用mouseenter和mouseleave。此外，将鼠标悬停在将要消失的元素上时，您会得到奇怪的结果。

你的代码可以写成

$(".trigger").on("mouseover mouseout", function(evt){
    var opacity = evt.type=="mouseover" ? 1 : .8;
    $(this).stop().fadeTo(1000, opacity);    
})