3 Replies - 1664 Views - Last Post: 21 June 2013 - 09:29 PM

#1 L2g2h  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 15
  • Joined: 18-May 13

Question while learning jQuery

Posted 13 June 2013 - 03:25 PM

So I'm attempting to make a jquery action change a div's transparency to 1 for no other reason than learning via a tutorial. Issue being I can't seem to figure out what I'm doing wrong. I'll mark out the html / css / jscript

Tutorial Text
Get Yourself In...
Great! Next, let's include our function keyword and two new actions together, mouseenter() and fadeTo().

mouseenter() does what you might expect: it produces a change when your mouse enters a given HTML element. For example,

$(document).ready(function() {
    $('div').mouseenter(function() {
        $('div').hide();
    });
});
would hide every <div> on the page as soon as you mouse over one. (We'll find out how to affect just one <div> among many in the next lesson.) For now, we only have one <div>, so this setup is okay.

Instead of hide(), however, we'll place fadeTo() inside mouseenter(). fadeTo() takes two arguments, or inputs, between its parentheses, separated by a comma: the speed at which to fade, and the opacity (or transparency) to fade to. For example,

fadeTo('fast', 0.25);
would quickly fade the target element to 25% of its original opacity, making it very light-colored.

INSTRUCTIONS
Using the examples above, make it so your 'div' fades to 1 (100%) opacity when your mouse enters the 'div'. Make the animation speed 'fast'. (Make sure to give fadeTo() its inputs in order—speed, then opacity.)
Click Save & Submit Code, then slowly mouse over your 'div' to see the effect!



HTML
<!DOCTYPE html>
<html>
<script type="text/javascript" src="script.js"></script>
	<head>
		<title>Button Magic</title>
        <link rel='stylesheet' type='text/css' href='stylesheet.css'/>
	</head>
	<body>
     <div><br/><strong>Click Me!</strong></div>   
	</body>
</html>



CSS
div {
    height: 60px;
    width: 100px;
    border-radius: 5px;
    background-color: #69D2E7;
    text-align: center;
    color: #FFFFFF;
    font-family: Verdana, Arial, Sans-Serif;
    opacity: 0.5;
}



script.js
$(document).ready(function() {
$('div').mousenter(function() {
$('div').fadeTo('fast', 1);
});
$('div').mouseleave(function() {
$('div').fadeTo('fast', 0.5);
});



Is This A Good Question/Topic? 0
  • +

Replies To: Question while learning jQuery

#2 JackOfAllTrades  Icon User is offline

  • Saucy!
  • member icon

Reputation: 6107
  • View blog
  • Posts: 23,663
  • Joined: 23-August 08

Re: Question while learning jQuery

Posted 13 June 2013 - 04:05 PM

Not seeing where you included the most important part...the jQuery library!
Was This Post Helpful? 1
  • +
  • -

#3 steve.v  Icon User is offline

  • New D.I.C Head

Reputation: 2
  • View blog
  • Posts: 31
  • Joined: 31-October 12

Re: Question while learning jQuery

Posted 21 June 2013 - 08:34 PM

Yea you're missing a script src link to the jquery file.
Was This Post Helpful? 0
  • +
  • -

#4 laytonsdad  Icon User is online

  • Cheese and Sprinkles
  • member icon

Reputation: 449
  • View blog
  • Posts: 1,936
  • Joined: 30-April 10

Re: Question while learning jQuery

Posted 21 June 2013 - 09:29 PM

Be sure to add the jquery script before the script.js call.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1