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);    
})

Jquery总是重复功能

1 个答案: