jQuery总是重复功能

Posted 2023-05-08

【中文标题】jQuery总是重复功能

【英文标题】：Jquery always repeat functions

【发布时间】：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() 不同。

【参考方案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);    
)