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 上并处于递归模式时，第二个函数执行并在第一个函数之后继续执行，效果是当鼠标悬停在不透明度低和鼠标移出时不透明度增长

Working ..... here 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);    
})