jQuery addClass example

Change class name on click in jQuery

by ainop

HTML

<html lang="en">
<head>
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

 
  <script>
   var mainSlider = $('.mainSlider');

    var sliderWidth = mainSlider.find('.sliderInner').width();
    var sliderLeft = +(sliderWidth - $(window).width())/2;
    $( window ).resize(function(){
        sliderWidth = mainSlider.find('.sliderInner').width();
        sliderLeft = +(sliderWidth - $(window).width())/2;
    });

    function pauseEvent(e){
        if(e.stopPropagation) e.stopPropagation();
        if(e.preventDefault) e.preventDefault();
        e.cancelBubble=true;
        e.returnValue=false;
        return false;
    }


    mainSlider.find('.controls')
        .bind('move', function(e) {
            // move .mydiv horizontally
            mainSlider.find('.rightPart').css('width', (sliderLeft + e.pageX)/sliderWidth*100 + '%');
        })
        .bind('moveend', function() {
            mainSlider.find('.rightPart').animate({'width': '50%'},500);
            // move is complete!
        });
  </script>
</head>
<body>
 
<div class="mainSlider above-header">
<div class="sliderInner"><img src="http://stayclean.ru/images/david-ok.png" alt="" height="100%">
<div class="rightPart">&nbsp;
<div class="separator">
<div class="controls">&nbsp;</div>
</div>
</div>
</div>
</div>
 
 
</body>
</html>

CSS

.mainSlider {
    position: relative;
    z-index: 1;
    height: 365px;
    overflow: hidden;
    color: #fff;
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    }
    .mainSlider .sliderInner {
    margin-left: -470px;
    position: absolute;
    top: 0;
    left: 50%;
    width: 941px;
    height: 100%;
    }
    .mainSlider .sliderInner > img {
    position: absolute;
    top: 0;
    left: 50%;
    margin-left: -470px;
    }
    .mainSlider .sliderInner .rightPart {
    background: transparent url(http://stayclean.ru/images/david-dirty.png) no-repeat 0px 0;
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    height: 100%;
    overflow: visible! important;
    zoom: 0.849;
    }
    .mainSlider .sliderInner .rightPart .separator {
    border-left: 3px solid #10dbb1;
    background: transparent;
    position: absolute;
    top: 0;
    left: auto;
    width: 3px;
    height: 100%;
    right: -4px;
    }
    .mainSlider .sliderInner .rightPart .separator .controls {
    width: 40px;
    height: 40px;
    left: -21px;
    position: absolute;
    bottom: 19px;
    background: #10dbb1 url(http://stayclean.ru/images/main-slider-controll.png) no-repeat center;
    border-radius: 100%;
}

JavaScript

(function (module) {
    if (typeof define === 'function' && define.amd) {
        // AMD. Register as an anonymous module.
        define(['jquery'], module);
    } else {
        // Browser globals
        module(jQuery);
    }
})(function(jQuery, undefined){

    var // Number of pixels a pressed pointer travels before movestart
    // event is fired.
        threshold = 6,

        add = jQuery.event.add,

        remove = jQuery.event.remove,

    // Just sugar, so we can have arguments in the same order as
    // add and remove.
        trigger = function(node, type, data) {
            jQuery.event.trigger(type, data, node);
        },

    // Shim for requestAnimationFrame, falling back to timer. See:
    // see http://paulirish.com/2011/requestanimationframe-for-smart-animating/
        requestFrame = (function(){
            return (
                window.requestAnimationFrame ||
                    window.webkitRequestAnimationFrame ||
                    window.mozRequestAnimationFrame ||
                    window.oRequestAnimationFrame ||
                    window.msRequestAnimationFrame ||
                    function(fn, element){
                        return window.setTimeout(function(){
                            fn();
                        }, 25);
                    }
                );
        })(),

        ignoreTags = {
            textarea: true,
            input: true,
            select: true,
            button: true
        },

        mouseevents = {
            move: 'mousemove',
            cancel: 'mouseup dragstart',
            end: 'mouseup'
        },

        touchevents = {
            move: 'touchmove',
            cancel: 'touchend',
            end: 'touchend'
        };


    // Constructors

    function Timer(fn){
        var callback = fn,
            active = false,
            running = false;

        function trigger(time) {
            if (active){
                callback();
               ...