CSS/JS: Triggering remote text glowing effect with transition

Question

I'm trying to combine these two examples that I have.
At the moment I have this:

Nouns - Verbs

I like to ride my bicycle every day.

When you hover over "Nouns" all the nouns in the sentence glow and the same kind of thing for "Verbs". That is achieved by this example ( JSFiddle ):

HTML

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

<p>
  <span id ="noun">Nouns</span> - <span id="verb">Verbs</span>
</p>

I 
<span class="verb">like</span> 
to 
<span class="verb">ride</span> 
my 
<span class="noun">bicycle</span> 
every 
<span class="noun">day</span>.

CSS

#verb {

}

.verb {
text-shadow: none;
display: inline;
}
#noun {

}

.noun {
text-shadow: none;
display: inline;
}    

JS

$(document).ready(function(){
    $("#verb").mouseenter(function(){
        $(".verb").css("text-shadow", "0 0 3px blue");
    });
    $("#verb").mouseleave(function(){
        $(".verb").css("text-shadow", "");
    });

    $("#noun").mouseenter(function(){
        $(".noun").css("text-shadow", "0 0 3px red");
    });
    $("#noun").mouseleave(function(){
        $(".noun").css("text-shadow", "");
    });
});

But the glowing effect I have is too instant on and off, I want to have a nice transition, like this other example ( JSFiddle ):

HTML

<div class="confirm_selection">[ Confirm Selection ]</div> 

CSS

.confirm_selection {
    -webkit-transition: text-shadow 0.2s linear;
    -moz-transition: text-shadow 0.2s linear;
    -ms-transition: text-shadow 0.2s linear;
    -o-transition: text-shadow 0.2s linear;
    transition: text-shadow 0.2s linear;

    overflow-x: hidden; 
    overflow-y: hidden; 
    opacity: 1;

}
.confirm_selection:hover {
    text-shadow: 0 0 3px red;
}

Can someone show me how to combine these?

Answer 1

Try to add transition css in javascript.Might be this can help you.

  $("#verb").mouseenter(function(){
        $(".verb").css({"transition": "text-shadow 0.2s linear","text-shadow":"0 0 3px blue"});
    });

Answer 2

You can also toggle classes so that on hover of #noun, it adds .noun-hovered to .noun and put the transition on .noun. That way your javascript could be only removing/adding classes. seen here: https://jsfiddle.net/okhceoLk/

JS:

$(document).ready(function(){
  $("#verb").mouseenter(function(){
    $(".verb").addClass("verb-hovered");
  });
 $("#verb").mouseleave(function(){
    $(".verb").removeClass("verb-hovered");
  });

  $("#noun").mouseenter(function(){
    $(".noun").addClass("noun-hovered");
  });
  $("#noun").mouseleave(function(){
    $(".noun").removeClass("noun-hovered");
  });
});

CSS:

 .verb,.noun {
   text-shadow: none;
   display: inline;
   transition: text-shadow 1s;
 }

 .verb-hovered {
   text-shadow: 0 0 3px blue;
 }

 .noun-hovered {
   text-shadow: 0 0 3px red;
 }