Grab Text storing it in a var then adding html method and adding animation to it

Question

I want to know the correct way to finish up this code at the bottom. I'm thinking there has to be a better way to grab content from one section of your site and displaying it somewhere else with animation attached to it. The Code below seems like it can do better. I post the entire code below, but you might be able to understand what i'm trying to accomplish just by reading this few lines of code. I left comments to help

// Find what input field was clicked
var formVaule = $('input[value="' + ValUe + '"]');
// Find the content and store it.
var k = formVaule.next().text();
// Display H2 tag with the content that was stored 
$('#' + ValUe).html('<h2>' + k + '</h2>');
// Animated the h2 tag with a background color
$('#' + ValUe).find('h2').animate({ backgroundColor: "#40822B" }, 100, 
// Call a callback function with the attention of removing the background.
function() {
 $('#' + ValUe).find('h2').animate({ backgroundColor: "white"}, 500);
});

Full code Below

<form>
 <input type="radio" name="form" value="informed"/>
 <span>INFORMED CONSENT</span><br />
 <input type="radio" name="form" value="release"/>
 <span>RELEASE OF INFORMATION</span><br />
 <input type="radio" name="form" value="intake"/>
 <span>INTAKE FORM</span><br />
 <input type="radio" name="form" value="checklist"/>
 <span>CHECKLIST OF CONCERNS (CHILD & ADOLESCENT AND ADULT)</span><br />
 <input type="radio" name="form" value="health"/>
 <span>HEALTH INFORMATION PRIVACY FORM</span><br />
</form>
<div id="informed" class="Form">1</div>
<div id="release" class="Form">2</div>
<div id="intake" class="Form">3</div>
<div id="checklist" class="Form">4</div>
<div id="health" class="Form">5</div>
<div id="ContactFormSix" class="Form">6</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/jquery-ui.min.js"></script>
<script>
var myForm = new Array("INFORMED CONSENT","RELEASE OF INFORMATION","INTAKE FORM");
$(document).ready(function () {
 $('input').on( 'change', function () {
 //check
 var ValUe = $(this).val();
 $('.Form').hide();
 $('#' + ValUe).show();
 //Find the value of the input that was clicked
 var formVaule = $('input[value="' + ValUe + '"]');
 //Grab the value of the input that was clicked and find the next element and retreive the text
 var k = formVaule.next().text();
 //Prepend the elemnts text
 $('#' + ValUe).html('<h2>' + k + '</h2>');
 $('#' + ValUe).find('h2').animate({ backgroundColor: "#40822B" }, 100, function() {
 $('#' + ValUe).find('h2').animate({ backgroundColor: "white"}, 500);
 });
 });
});
</script>

Answer 1

At first, you are requesting the element # + ValUe 4 times. That means jQuery need to search to the entire DOM 4 times to get an element. Cache the value of this element and use that cache variable:

var elem = $('#' + ValUe);
elem.html(...);
elem.find(...);

$(this) inside the callback of the .animate method refers to the animated element, you don't need to use $('#' + ValUe).find('h2') again, just use $(this).

You use formVaule once, just use that constructor instead of saving it to a variable.

To complete correct code:

var k = $('input[value="' + ValUe + '"]').next().text();
var elem = $('#' + ValUe);
// Display H2 tag with the content that was stored 
elem.html('<h2>' + k + '</h2>');
// Animated the h2 tag with a background color
elem.find('h2').animate({ backgroundColor: "#40822B" }, 100, function() {
 // Call a callback function with the attention of removing the background.
 $(this).animate({ backgroundColor: "white"}, 500);
});