Reset fade to opacity defined in css

Question

I have a problem stopping the jQuery fadeOut effect and have it return to the correct opacity as specified in the css file.

When the mouse enters an .item, the .editing div shows up immediately with an opacity of 90% as defined in the css. Now, when the mouse leaves and re-enters during fadeout, the opacity is stuck at the current fadeout opacity level. See this jsFiddle

All I can find is that you should call opacity(100) after calling stop(). See this Q/A. The problem is that this doesn't work for me, because I want to reset it to the 90% as defined in the css.

Anyone knows how to do this without hardcoding the correct opacity in javascript?

HTML

<div class="list">
    <div class="item"><div class="editing">edit</div></div>
    <div class="item"><div class="editing">edit</div></div>
    <div class="item"><div class="editing">edit</div></div>
    <div class="item"><div class="editing">edit</div></div>
</div>

CSS

.editing {
    display: none;
    opacity: 0.9;
    filter: alpha(opacity=90);
}

JavaScript

$(".item").hover(function() {
    // enter
    $(".editing", this).stop();
    $(".editing", this).show();
}, function() {
    // leave
    $(".editing", this).fadeOut(1000);
});

1

http://jsfiddle.net/QShwJ/1/ – adeneo Aug 25 '13 at 19:19

score 1 · Accepted Answer · answered Aug 25 '13 at 19:20

You will want to set the jumpToEnd parameter, do it like this:

$(".item").hover(function() {
    // enter
    $(".editing", this).stop(true, true).show();
}, function() {
    // leave
    $(".editing", this).fadeOut(500);
});

See here for reference:
http://api.jquery.com/stop/#stop-clearQueue-jumpToEnd

fiddle:

http://jsfiddle.net/QShwJ/2/

Reset fade to opacity defined in css

1 Answers1