how do i get it to fade to the next name

Question

 var peopleArray = [ {name: 'Abby Sepple', weirdThing: 'Abbey Road and pterodactyl hiccups' }, {name: 'Alayna Buysse', weirdThing: 'Chucky cheese suit and heard that' }, {name: 'Amy Venturino', weirdThing: 'No social media and 2 uvulas' }, {name: 'Barbara King', weirdThing: 'Semi conductor expert and hates touching raw meat' }, {name: 'Benjimin Lauderbaugh', weirdThing: 'minecraft and sleep walking' }, {name: 'Charlie Garnaas', weirdThing: 'Morning ice-cream snacking and hates lines' }, {name: 'Colin James Wymore', weirdThing: 'LOVEs conspiracy theories' }, {name: 'Droo Hastings', weirdThing: 'Touring musician who craved normalcy' }, {name: 'Amal Ali', weirdThing: 'Bust out dancing' }, {name: 'Jim Vang', weirdThing: 'Puts stuff away and lab practical joker' }, {name: 'Jorge Blue', weirdThing: 'Curious person and had a bit of tree branch in bicep for too long' }, {name: 'Kara Bayse', weirdThing: 'Collects all the bags and will never eat white castle' }, {name: 'Matt Larson', weirdThing: 'Experimental everything and collecting things for toy alter' }, {name: 'Neota Moe', weirdThing: 'Loves watching surgeries, even her own and can talk about gross stuff over dinner' }, {name: 'Ryan Beadie', weirdThing: 'Hockey hair mullet perm and seven of his favorite shirts' }, {name: 'Sean Felling', weirdThing: 'Smiles when he is nervous and walks on the outside of his feet' }, {name: 'Tiffany Love', weirdThing: 'Singing even when she does not realize it and Sunday morning breakfasts' }, {name: 'Tessa M Ganser', weirdThing: 'Whale drone videos and big family' }, {name: 'Zeinab Hassan', weirdThing: 'Sweet and savory and Nutella egg breakfasts' } ]; $(onReady); var nameIndex = 0; function onReady() { console.log('inside onReady'); $('#nameDisplay').text('Name'); $('#weirdDisplay').text('Weird'); $('#nameChanger').on('click', nextName); $('#nameBack').on('click', prevName); }//the end of onReady function function nextName() { console.log('inside nextName'); if (nameIndex == peopleArray.length) { console.log('I AM WHERE I NEED TO BE'); nameIndex = 0; } else if (nameIndex == -1) { nameIndex = peopleArray.length - 1; } $('#nameDisplay').text(peopleArray[nameIndex].name); $('#weirdDisplay').text(peopleArray[nameIndex].weirdThing); $('#current').text(nameIndex + 1 + '/19'); nameIndex++; } function prevName() { console.log('inside prevName'); // $('.nameDisplay').attr('value', peopleArray[nameIndex].name); if (nameIndex == peopleArray.length) { console.log('I AM WHERE I NEED TO BE'); nameIndex = 0; } else if (nameIndex == -1) { nameIndex = 19; } nameIndex = nameIndex -1; $('#current').text(nameIndex + '/19'); $('#nameDisplay').text(peopleArray[nameIndex].name); $('#weirdDisplay').text(peopleArray[nameIndex].weirdThing); if (nameIndex === 0) { console.log('I am where i need to be'); nameIndex = 19; // console.log(nameIndex); } if (nameIndex === 0) { console.log('this'); $('#current').text(1 + '/19'); } console.log(nameIndex); }

 .display { display: inline-block; margin:0; padding:0; } #nameDisplay { font-size: 1.5em; } #weirdDisplay { font-size: 1em; } .button { display: block; font-size: 1em; margin-top: 1em; }

 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Weekend Challenge 1</title> <link rel="stylesheet" href="style.css" /> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha256-k2WSCIexGzOj3Euiig+TlR8gA0EmPjuc79OEeY5L45g=" crossorigin="anonymous"></script> <script type="text/javascript" src="data.js"></script> <script type="text/javascript" src="client.js"></script> </head> <body> <div class="container"> <p class = 'display' id = 'nameDisplay'></p> <p class="display">: </p> <p class = 'display' id = 'weirdDisplay'></p> <p id='current'>something</p> <button type="button" name="button" class ='button' id = 'nameChanger'>Next</button> <button type="button" name="button" class ='button' id = 'nameBack'>Prev</button> </div> </body> </html>

How do i get this to fade to the next name, I already tried .fadeIn(), but that does not work, Is it fadeToggle or something like that? I have no idea how to fix this. Also if you see any other bugs please let me know

Answer 1

fadeIn and fadeOut won't work because you're using slim version of jquery, which doesn't have that functions. You can put

<script
    src="https://code.jquery.com/jquery-3.2.1.min.js"
    integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
    crossorigin="anonymous"></script>

instead of

<script
    src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
    integrity="sha256-k2WSCIexGzOj3Euiig+TlR8gA0EmPjuc79OEeY5L45g="
    crossorigin="anonymous"></script>

to get full jquery.

After that you can use fadeIn and fadeOut like this:

$('#nameDisplay').fadeOut(function(){
    $(this).text(peopleArray[nameIndex].name).fadeIn();
});

In this example - #nameDisplay fades out, then text inside is replaced, and after that #nameDisplay fades back in.

how do i get it to fade to the next name

Question

1 answers

solution1
0 ACCPTED 2017-05-20 14:26:04

how do i get it to fade to the next name

Question

1 answers

solution1 0 ACCPTED 2017-05-20 14:26:04

solution1
0 ACCPTED 2017-05-20 14:26:04