jQuery addClass example

Change class name on click in jQuery

HTML

<div class="containerSkew blue">
    <div class="skewContent blue" id="toolbox">
        <div class="skewFix">
            <div class="toolbox_description">
                <div class="toolbox_text">
                    <h2>NOTRE BOÎTE A OUTILS</h2>
                    <p class="text-justify">
                        Got a lot of text here, blablablblalbalbalbalbalbalblablblalbal
                        <br>Still more ?
                    </p>
                    <h3 class="text-justify">
                        blablablblalbalbalbalbalbalblablblalbalblablablblalbalbalbalbalbalblablblalbalblablablblalbalbalbalbalbalblablblalbalblablablblalbalbalbalbalbalblablblalbalblablablblalbalbalbalbalbalblablblalbal
                    </h3>
                </div>
                
                                <div class="outil_volant">
                    <img src="https://via.placeholder.com/75x90" alt="regle" class="outil_volant" id="regle" />
                    <img src="https://via.placeholder.com/75x90" alt="marteaux" class="outil_volant" id="marteaux" />
                    <img src="https://via.placeholder.com/75x90" alt="scie" class="outil_volant" id="scie" />
                </div>
                <img src="https://via.placeholder.com/400x300" alt="Boite à outil" />


            </div>
        </div>
    </div>
</div>

CSS

.containerSkew {
    opacity: 1;
}
.blue {

    background-color: #014f9b;

}

.skewContent {
    height: auto;
    -o-transform: skewY(-6deg);
    -moz-transform: skewY(-6deg);
    -ms-transform: skewY(-6deg);
    -webkit-transform: skewY(-6deg);
    transform: skewY(-6deg);
    transform-origin: top left;
    overflow: visible;
}

    .skewContent#toolbox {
        margin-top: -110px;
        outline: 1px solid transparent;
    }

.containerSkew .skewFix {
    -o-transform: skewY(6deg);
    -moz-transform: skewY(6deg);
    -ms-transform: skewY(6deg);
    -webkit-transform: skewY(6deg);
    transform: skewY(6deg);
}

.skewContent#toolbox .toolbox_description .toolbox_text {
    color: white;
    display: inline-block;
    width: 23%;
    vertical-align: top;
    margin-top: 25%;
}
    .skewContent#toolbox .toolbox_description .outil_volant {
    }

    .skewContent#toolbox .toolbox_description .outil_volant img {
        height: 75px;
        width: 90px;
        position: relative;
        z-index: 1;
    }

    .skewContent#toolbox .toolbox_description .outil_volant #regle {
        top: -25px;
        margin-left: 20vw;
    }

    .skewContent#toolbox .toolbox_description .outil_volant #marteaux {
        left: -16%;
        margin-left: 20vw;
    }

    .skewContent#toolbox .toolbox_description .outil_volant #scie {
        left: -35%;
        margin-left: 20vw;
    }

JavaScript

if ($(".skewContent#toolbox .toolbox_description .outil_volant img").length){
        $(document).ready(function () {
            $('.skewContent#toolbox .toolbox_description .outil_volant img').jqFloat({
                width: 300,
                height: 100,
                speed: 3000,
                minHeight: 10
            });
        });
    }
    
    
    
    
    
    /*
* jqFloat.js - jQuery plugin
* A Floating Effect with jQuery!
*
* Name:			jqFloat.js
* Author:		Kenny Ooi - http://www.inwebson.com
* Date:			December 6, 2012		
* Version:		1.1
* Example:		http://www.inwebson.com/demo/jqfloat/
*	
*/

(function($) {
	
	//plugin methods
	var methods = {
		
		init : function(options) { //object initialize
			//console.log('init');
			return this.each(function() {
				//define element data
				$(this).data('jSetting', $.extend({}, $.fn.jqFloat.defaults, options));
				$(this).data('jDefined', true);
				
				//create wrapper
				var wrapper = $('<div/>').css({
					'width': $(this).outerWidth(true),
					'height': $(this).outerHeight(true),
					'z-index': $(this).css('zIndex')
				});
				
				//alert($(this).position().top);
				if($(this).css('position') == 'absolute')
					wrapper.css({
						'position': 'relative',
						'top': $(this).position().top,
						'left': $(this).position().left
					});
				else 
					wrapper.css({
						'float': $(this).css('float'),
						'position': 'relative'
					});
				
				//check for margin auto solution
				if (($(this).css('marginLeft') == '0px' || $(this).css('marginLeft') == 'auto') && $(this).position().left > 0 && $(this).css('position') != 'relative') { 
					wrapper.css({
						'marginLeft': $(this).position().left
					});
				}
				
				
				$(this).wrap(wrapper).css({
                    'position': 'relative',
					'top': 0,
					'left': 0
				});
				
				//call play method
				//methods.play.apply($(this));
			});
		},
		update : function(options) {
			$(this).data('jSetting', $.extend({},...