Fayssal Ozilf Fayssal Ozilf - 2 months ago 8
CSS Question

how to make a clean script instead of duplicating same script for each element

this is my actual (nasty) script I want to make it as clean as possible,
and i mean making only one

function
for all the
<span>
elements



function editTipA() {
//orders and discribing
jQuery("#editTipA").stop().css({
"opacity": "100",
});
jQuery("#editTipA").animate({
//transparency
opacity: 0.01,
//speed
}, 700);
}

function editTipB() {
//orders and discribing
jQuery("#editTipB").stop().css({
"opacity": "100",
});
jQuery("#editTipB").animate({
//transparency
opacity: 0.01,
//speed
}, 700);
}

function editTipC() {
//orders and discribing
jQuery("#editTipC").stop().css({
"opacity": "100",
});
jQuery("#editTipC").animate({
//transparency
opacity: 0.01,
//speed
}, 700);
}

function editTipD() {
//orders and discribing
jQuery("#editTipD").stop().css({
"opacity": "100",
});
jQuery("#editTipD").animate({
//transparency
opacity: 0.01,
//speed
}, 700);
}

function editTipE() {
//orders and discribing
jQuery("#editTipE").stop().css({
"opacity": "100",
});
jQuery("#editTipE").animate({
//transparency
opacity: 0.01,
//speed
}, 700);
}

function editTipF() {
//orders and discribing
jQuery("#editTipF").stop().css({
"opacity": "100",
});
jQuery("#editTipF").animate({
//transparency
opacity: 0.01,
//speed
}, 700);
}

function editTipG() {
//orders and discribing
jQuery("#editTipG").stop().css({
"opacity": "100",
});
jQuery("#editTipG").animate({
//transparency
opacity: 0.01,
//speed
}, 700);
}

function editTipH() {
//orders and discribing
jQuery("#editTipH").stop().css({
"opacity": "100",
});
jQuery("#editTipH").animate({
//transparency
opacity: 0.01,
//speed
}, 700);
}

function editTipI() {
//orders and discribing
jQuery("#editTipI").stop().css({
"opacity": "100",
});
jQuery("#editTipI").animate({
//transparency
opacity: 0.01,
//speed
}, 700);
}

function editTipJ() {
//orders and discribing
jQuery("#editTipJ").stop().css({
"opacity": "100",
});
jQuery("#editTipJ").animate({
//transparency
opacity: 0.01,
//speed
}, 700);
}

body {
background-color: black;
font-size: 50px;
font-family: cursive;
}
.A {
color: #FF0099;
}
.B {
color: #FF3399;
}
.C {
color: #FF6699;
}
.D {
color: #FF9999;
}
.E {
color: #FFCC99;
}
.F {
color: #FFFF99;
}
.G {
color: #FFFF00;
}
.H {
color: #FFCC00;
}
.I {
color: #FF9900;
}
.J {
color: #FF6600;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<p><span onmouseover="editTipA()" class="A" id="editTipA" style="opacity: 0">H</span><span onmouseover="editTipB()" class="B" id="editTipB" style="opacity: 0">E</span><span onmouseover="editTipC()" class="C" id="editTipC" style="opacity: 0">L</span><span onmouseover="editTipD()" class="D" id="editTipD" style="opacity: 0">L</span><span onmouseover="editTipE()" class="E" id="editTipE" style="opacity: 0">O</span>
<span onmouseover="editTipF()" class="F" id="editTipF" style="opacity: 0"> W</span><span onmouseover="editTipG()" class="G" id="editTipG" style="opacity: 0">O</span><span onmouseover="editTipH()" class="H" id="editTipH" style="opacity: 0">R</span><span onmouseover="editTipI()" class="I" id="editTipI" style="opacity: 0">L</span><span onmouseover="editTipJ()" class="J" id="editTipJ" style="opacity: 0">D</span>
</p>





something like this, so here the
CSS
must do the rainbow style on "hello world", and the
js
function must do apply fading animation :



function editTip() {
//orders and discribing
jQuery("#editTip").stop().css({
"opacity": "100",
});
jQuery("#editTip").animate({
//transparency
opacity: 0.01,
//speed
}, 700);
}

body {
background-color: black;
}
p {
font-size: 50px;
font-family: cursive;
color: #FF0099;
background-image: -webkit-gradient( linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2),color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22) );
background-image: gradient( linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2),color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22) );
color:transparent;
-webkit-background-clip: text;
background-clip: text;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<body onload="editTip()">
<p>
<span onmouseover="editTip()" class="A" id="editTip" style="opacity: 0">H</span><span onmouseover="editTip()" class="B" id="editTip" style="opacity: 0">E</span><span onmouseover="editTip()" class="C" id="editTip" style="opacity: 0">L</span><span onmouseover="editTip()" class="D" id="editTip" style="opacity: 0">L</span><span onmouseover="editTip()" class="E" id="editTip" style="opacity: 0">O </span>
<span onmouseover="editTip()" class="F" id="editTip" style="opacity: 0">W</span><span onmouseover="editTip()" class="G" id="editTip" style="opacity: 0">O</span><span onmouseover="editTip()" class="H" id="editTip" style="opacity: 0">R</span><span onmouseover="editTip()" class="I" id="editTip" style="opacity: 0">L</span><span onmouseover="editTip()" class="J" id="editTip" style="opacity: 0">D</span></p>
</body>




Answer

Here's one solution that might get you started. The Javascript section of the code is commented. And, by the way, you may Quick-Test it Here.

HTML FRAGMENTS:

    <p>
        <span class="A" style="opacity: 0">H</span>
        <span class="B" style="opacity: 0">E</span>
        <span class="C" style="opacity: 0">L</span>
        <span class="D" style="opacity: 0">L</span>
        <span class="E" style="opacity: 0">O </span>
        <span class=""  style="opacity: 1">&nbsp;</span>
        <span class="F" style="opacity: 0">W</span>
        <span class="G" style="opacity: 0">O</span>
        <span class="H" style="opacity: 0">R</span>
        <span class="I" style="opacity: 0">L</span>
        <span class="J" style="opacity: 0">D</span>
    </p>

JAVASCRIPT:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript">

    (function($){
        $(document).ready(function(evt){
            // SINCE EACH FUNCTION IN YOUR CODE IS DOING THE SAME THING,
            // YOU JUST NEED TO IDENTIFY THE VARYING ENTITY (THE VARIABLE)
            // IN THIS CASE; IT IS JUST THE CLASSES OF THE SPAN ELEMENTS...
            // SO WE PROPOSE TO PUT THEM IN AN ARRAY AND LOOP THROUGH THEM...
            var elemClasses = [
                ".A",
                ".B",
                ".C",
                ".D",
                ".E",
                ".F",
                ".G",
                ".H",
                ".I",
                ".J"
            ];

            // FIRST, EXPLICITLY CALL THE editTip FUNCTION
            // TO RUN AUTOMATICALLY ONCE THE DOCUMENT IS READY...
            // THAT IS, WHEN THE BODY HAS ALSO FULLY LOADED:
            editTip(elemClasses);

            // LOOP THROUGH THE ARRAY OF ELEMENT CLASSES
            // AND WITH EACH ITERATION PASS THE ELEMENT CLASS
            // TO THE activateHoverAction FUNCTION DEFINED BELOW...
            // WHICH IN TURN CONTAINS SIMILAR CODE AS THE editTip FUNCTION
            elemClasses.forEach( function(elemClass, elemIndex){
                activateHoverAction(elemClass);
            });

            // FUNCTION THAT TAKES A DOM-ELEMENT CLASS
            // AND BINDS IT WITH THE MOUSE-OVER & MOUSE OUT EVENTS
            // WITHIN THE FUNCTION: A SIMILAR CODE TO editTip() IS RUN.
            // REMOVE THE MOUSE-OUT BINDING IF YOU DON'T NEED IT.
            // ADDED IT HERE FOR TESTING... YOU MAY ALSO MODIFY IT (IF YOU WISH). 
            function activateHoverAction(elemClass){
                $(elemClass).on("mouseover", function(){
                    $(this).stop().css({
                        "opacity": 1
                    }).animate({opacity: 0.01}, 700);
                });

                $(elemClass).on("mouseout", function(){
                    $(this).stop().css({
                        "opacity": 0.01
                    }).animate({opacity: 1}, 700);
                });
            }

            // THIS editTip FUNCTION EXACTLY THE SAME AS YOUR
            // EXCEPT FOR A LITTLE REFACTORING...
            // HOWEVER THIS FUNCTION IS ONLY CALLED "ONCE"
            // IMMEDIATELY AFTER THE DOCUMENT FINISHED LOADING... 
            // A BETTER NAME WOULD HAVE BEEN init OR SO....
            function editTip(elemClasses){
                elemClasses.forEach( function(elemClass, elemIndex){
                    $(elemClass).stop().css({
                        "opacity": 1
                    }).animate({opacity: 0.01}, 700);
                });
            }


        });
    })(jQuery);

</script>

CSS:

    <style type="text/css">
        body {
            background-color: black;
            font-size: 50px;
            font-family: cursive;
        }

        /* JUST FOR FUN: MAKE THE CURSOR LOOK LIKE A POINTER. */  
        .A, .B, .C, .E, .E, .F, .G, .H, .I, .J{
            cursor: pointer;
        }
        .A {
            color: #FF0099;
        }
        .B {
            color: #FF3399;
        }
        .C {
            color: #FF6699;
        }
        .D {
            color: #FF9999;
        }
        .E {
            color: #FFCC99;
        }
        .F {
            color: #FFFF99;
        }
        .G {
            color: #FFFF00;
        }
        .H {
            color: #FFCC00;
        }
        .I {
            color: #FF9900;
        }
        .J {
            color: #FF6600;
        }
    </style>