jQuery effects and animation sample file

index.html

<section id="global">
  <nav>
    <a href="" id="hide">hide</a>
    <a href="" id="show">show</a>
    <a href="" id="toggle">toggle</a>
  </nav>
</section>

<section id="animationFunctions">
  <nav>
    <ul>
      <li id="tooltipHover" class="word">tool tip
        <div class="tip">hovering tool tip</div>
      </li>
      <li id="fadeIn" class="word">fadeIn
        <div class="tip">hovering fadeIn</div>
      </li>
      <li id="fadeOut">fadeOut</li>
      <li id="fadeToggle">fadeToggle</li>
      <li id="slideDown">slideDown</li>
      <li id="slideUp">slideUp</li>
      <li id="slideToggle">slideToggle</li>
      <li id="animate">animate</li>
      <li id="animateCallback">animate with callback function</li>
      <li id="resetText">reset text</li>
    </ul>
  </nav>
</section>

<section id="testShape">
  <p id="sampleText">
    Disrupt ex pug tousled vegan raw denim magna, aute williamsburg intelligentsia sartorial nihil bicycle rights PBR chambray. Sapiente authentic photo booth church-key, cray biodiesel eu. Cupidatat freegan gluten-free intelligentsia american apparel, chillwave
    anim wes anderson fingerstache scenester 90's. Farm-to-table minim hoodie etsy, pickled helvetica vegan quinoa. Blue bottle assumenda yr, occupy odio meggings ethical. Four loko narwhal literally, umami cray fashion axe kogi meh chillwave selvage
    photo booth swag fanny pack. Forage stumptown neutra hashtag.
  </p>
  <p id="sampleText2">
    Pour-over mcsweeney's quis hashtag fashion axe truffaut tattooed, minim ut nisi. Labore iphone VHS meggings, gluten-free irure accusamus 8-bit echo park nihil quinoa. Nostrud in veniam, twee culpa occupy vinyl banksy pariatur tonx farm-to-table. Church-key
    street art synth pug non labore.
  </p>
</section>

jQuery effects and animation sample file.markdown

jQuery effects and animation sample file

Forked from glenda drew's Pen target practice complete.

A Pen by Spencer Mathews on CodePen.

License.

script.js

// JavaScript Document

$(document).ready(function() {
  //console.log("ready");

  //hide all tool tips
  $('.tip').hide();

  //tooltip (hover takes two functions)
  $('.word').hover(function() { // first function
    console.log("mouseover toolip");

    //make sure the selector is correctly targeting the .tip
    // in the form of '#myID .myClass'
    console.log($("#" + this.id + " .tip"));

    //turn on the tool tip
    $("#" + this.id + " .tip").show();

  }, function() { // second function
    $("#" + this.id + " .tip").hide();
  });

  //change cursor
  $('#fadeIn').mouseover(function() {
    console.log("mouseover");
    $('#fadeIn').css('cursor', 'crossHair'); // cursor is a css property
  });

  //fadeIn	 
  $('#fadeIn').click(function() {
    console.log("fade in");
    //with no parameter of speed, the fadeIn is 400ms
    $('#sampleText').fadeIn();
  });

  //fadeOut
  $('#fadeOut').click(function() {
    $('#sampleText').fadeOut();
  });

  //fadeToggle
  $('#fadeToggle').click(function() {
    $('#sampleText').fadeToggle();
  });

  //slideDown
  $('#slideDown').click(function() {
    console.log("slide down");
    $('#sampleText').slideDown();
  });

  //slideUp
  $('#slideUp').click(function() {
    console.log("slide up");
    $('#sampleText').slideUp();
  });

  //slideToggle
  $('#slideToggle').click(function() {
    console.log("slide toggle");
    $('#sampleText').slideToggle();
  });

  //animate
  $('#animate').click(function() {
    console.log("animate");
    $('#sampleText').animate({
      // the first option for animate is the css to change
      // the css properties do not use hyphens; they use camelCase
      // the css must be set by numerics as object literals
      // object literals are written with a colon between pairs of property and value, comma between pairs
      fontSize: '24px',
      marginLeft: '136px'
    });
  });

  //animate with callback function (second function)
  $('#animateCallback').click(function() {
    console.log("animate with callback");
    //make sure text is showing and then chain function to make sure right size
    $('#sampleText').show().css('fontSize', '16px');
    //animate function
    $('#sampleText').animate({
        opacity: 1,
        fontSize: '24px',
        marginLeft: '136px'
      },
      500, animateSampleText2 // animateSampleText2 is the function to call when the first animate function completes
    );
  });

  //reset the text size
  $('#resetText').click(function() {
    //make sure text is showing and then chain function to make sure right size
    $('#sampleText').show().css('font-size', '16px');
    //make sure text is right size
    $('#sampleText2').css('font-size', '16px');
    $('#sampleText').css('margin-left', '0px');
  });

  //move global nav buttons on hover
  $('nav a').hover(function() {
    //stop any current animation
    //animate the left position of the link
    $(this).stop().animate({
        //in order to animate by edge value, positioning must be turned on in css
        left: '-10px',
        top: '3px'
      },
      300
    );
  }, function() {
    $(this).stop().animate({
        left: '0px',
        top: '0px'
      },
      300
    );
  });

  //hide animationFunctions
  $('#hide').click(function() {
    //use keyword to send speed value
    $('#animationFunctions').hide('slow');
    //prevents page from reloading
    return false;
  });

  //show animationFunctions
  $('#show').click(function() {
    //use value in milliseconds to send speed value
    $('#animationFunctions').show(2000);
    //prevents page from reloading
    return false;
  });

  //toggle animationFunctions
  $('#toggle').click(function() {
    //use an equation to send speed value
    $('#animationFunctions').toggle();
    //prevents page from reloading
    return false;
  });

  //organize your code so named functions are all defined together at end (or beginning) of js
  function animateSampleText2() {
    $('#sampleText2').animate({
        fontSize: '36px'
      },
      1500
    );
  }

  //close jQuery ready function	
});

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.css

@charset "UTF-8";

/* CSS Document */

* {
  margin: 0px;
  padding: 0px;
}

body {
  background-color: white;
  font-family: 'Droid', arial, serif;
  font-size: 20px;
}

nav a {
  display: block;
  width: 72px;
  height: 30px;
  text-align: center;
  padding-top: 5px;
  background: magenta;
  /* in case gradient does not load */
  background: linear-gradient(120deg, #F30, #B91C99);
  color: black;
  margin: 12px;
  border-radius: 3px;
  text-decoration: none;
}

p {
  margin-bottom: 12px;
  font-size: 16px;
}

#global {
  text-align: center;
  position: absolute;
  right: -3px;
  top: 250px;
  background-color: #333;
  padding: 10px;
  border-top-left-radius: 7px;
  border-bottom-left-radius: 7px;
  box-shadow: -5px 5px 7px #aaa;
}

#animationFunctions {
  width: 3in;
  position: absolute;
  top: 10px;
  left: 0px;
}

#animationFunctions ul {
  box-shadow: 5px 5px 7px #aaa;
  border-top-right-radius: 15px;
  border-bottom-right-radius: 15px;
  margin-top: 24px;
}

#animationFunctions li {
  list-style-type: none;
  height: .35in;
  background-color: #333;
  border-bottom: #CCC 1px solid;
  font-size: 16px;
  color: #999;
  padding: 18px;
}

#animationFunctions li:first-child {
  border-top-right-radius: 15px;
}

#animationFunctions li:last-child {
  border-bottom-right-radius: 15px;
  border-bottom: none;
}

#testShape {
  position: absolute;
  left: 3.25in;
  top: 34px;
  width: 6in;
  padding: 24px;
  background-color: magenta;
  border-radius: 15px
}

#hide,
#show,
#toggle {
  position: relative;
  /* necessary to later animate the top, right, bottom or left position */
}

.word {
  position: relative;
  /* necesary to place tool tip in location relative to the containing element */
}

.tip {
  position: absolute;
  /* positioning the tool tip close enough to interactive content */
  bottom: 33px;
  left: 72px;
  width: 70px;
  color: black;
  font-size: 10px;
  text-transform: uppercase;
  padding: 2px;
  background-color: pink;
  /*visibility:hidden;*/
}