StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>If I understand your question correctly, the problem occurs because when fancybox is trigger, the browser couldn't detect the "onmouseout" event and hence the image doesn't get fade back into opacity 1.</p> <p>An easy fix would be to manually trigger the opacity reset when fancybox is triggered:</p> <pre><code>// Abstract out the reset function var resetOpacity = function() { $(".portfolio_item a img").stop().animate({"opacity": "1"}); } // Apply the reset on complete $(".portfolio_item > a").fancybox({'onComplete': resetOpacity}); // Reuse the same reset function on hover out $(".portfolio_item > a img").hover( function() { $(this).stop().animate({"opacity": "0"}, "slow"); }, resetOpacity ); </code></pre> <p>You can try it out here: <a href="http://jsfiddle.net/6aDP5/2/" rel="nofollow">http://jsfiddle.net/6aDP5/2/</a></p> <p>And here is the code to the final behavior you were looking for: <a href="http://jsfiddle.net/6aDP5/9/" rel="nofollow">http://jsfiddle.net/6aDP5/9/</a></p> <pre><code>$(".portfolio_item > a").each(function() { var thisAnchor = $(this); var targetImg = $(this).find("img"); var fadeOpacity = function() { targetImg.stop().animate({"opacity": "0"}); } var resetOpacity = function() { targetImg.stop().animate({"opacity": "1"}); } thisAnchor .mouseenter(fadeOpacity) .mouseleave(resetOpacity) .fancybox({ 'onStart': function() { thisAnchor.unbind('mouseleave'); fadeOpacity(); }, 'onClosed': function() { thisAnchor.mouseleave(resetOpacity); resetOpacity(); } }); }); </code></pre>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload