JSFiddle - React, Tailwind, and code Playground

by gurkavcu

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Fade non-:hover images by class</title>
<style type="text/css">
    html, body {background-color: #000;}
</style>
</head>
<body>
<div>
<img src="http://farm1.static.flickr.com/45/143685076_33e370ecf6_t.jpg" alt="" class="car"/>
<img src="http://farm1.static.flickr.com/5/6041716_1645ce2ff3_t.jpg" alt="" class="car"/>
<img src="http://farm3.static.flickr.com/2245/2043558365_17ec0dde07_t.jpg" alt="" class="cat"/>
<img src="http://farm1.static.flickr.com/102/314811873_fe8c1d891c_t.jpg" alt="" class="dog"/>
<img src="http://farm3.static.flickr.com/2189/2126968075_cf00cf4ff2_t.jpg" alt="" class="cat"/>
<img src="http://farm4.static.flickr.com/3263/2796371597_182db9e6cf_t.jpg" alt="" class="dog"/>
<img src="http://farm4.static.flickr.com/3223/2975936836_3a175a5f62_t.jpg" alt="" class="dog"/>
<img src="http://farm2.static.flickr.com/1313/634556562_7de4049b57_t.jpg" alt="" class="cat"/>
<img src="http://farm4.static.flickr.com/3276/2683356214_de85ea8877_t.jpg" alt="" class="car"/>
<img src="http://farm1.static.flickr.com/190/458003000_8ed18093f3_t.jpg" alt="" class="cat"/>
<img src="http://farm1.static.flickr.com/206/502468700_a359854fef_t.jpg" alt="" class="dog"/>
<img src="http://farm3.static.flickr.com/2252/2081189742_cf356549bb_t.jpg" alt="" class="car"/>

</div>
</body>
</html>

JavaScript

(function($) {
    jQuery.fn.groupHover = function(fnOver, fnOff, options) {
        var opts = jQuery.extend({}, jQuery.fn.groupHover.defaults, options);
        var timer, group = this;
        return this.hover(function(event) {
            if (timer) clearTimeout(timer);
            timer = setTimeout(function() {
                fnOver.call(group, event)
            }, opts.threshhold);
        }, function(event) {
            if (timer) clearTimeout(timer);
            timer = setTimeout(function() {
                fnOff.call(group, event)
            }, opts.threshhold);
        });

    }
    $.fn.groupHover.defaults = {
        threshhold: 0
    };

    var types = ["dog", "cat", "car"],
        dimmed = 0.7;

    $(document).ready(function() {
        $.each(types, function(index, type) {
            $("img." + type).fadeTo(0, dimmed).groupHover(function(event) {
                this.stop().fadeTo("fast", 1.0);
            }, function(event) {
                this.stop().fadeTo("fast", dimmed);
            });
        });
    });
})(jQuery);