jQuery总是重复功能答案

【问题标题】：Jquery always repeat functionsjQuery总是重复功能
【发布时间】：2013-01-29 02:33:15
【问题描述】：

我有这两个函数来创建不透明效果

<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() 函数但问题仍然存在

【问题讨论】：

什么是独立的 stop() 函数？
你在元素中淡入淡出没有意义，但是你设置了它的不透明度？你为什么要做第二行。你想使用fadeTo()！
jsfiddle.net/dSesq，你有，问候
stop() 与 .stop() 不同。

标签： javascript jquery jquery-animate fadein

【解决方案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);    
})

【讨论】：