Question

I have these 2 functions to create opacity effect

<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>

Into the div i call each function , the problem is when i put mouseover the div all time and in recursive mode the second function execute and after the first function and continue executed , the effect is when mouseover the opacity low and when mouseout opacity grow

Working ….. here jsfiddle.net/dSesq/

I don´t know why this happens, I’ve tried the stop() function but the problem continues

Answer 1

It makes no sense why you are setting the opacity of the element after fading it in. Use fadeTo!

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

And you should probably use mouseenter and mouseleave. Also you are going to get weird results having the mouse over an element that is going to disappear.

Your code could be written as

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