jQuery slidedown doesn't work in H1 tag

StackOverflow https://stackoverflow.com/questions/20732211

  •  20-09-2022
  •  | 
  •  

Question

So just started learning jQuery. I can't seem to make it work. So I already linked my jQuery to my html document with the script tag:

<script type="text/javascript" src="script.js"></script>

I have a h1 titled ONE TWO THREE. Each word is attributed differently using <span> tags. What I want to try out is put a slidedown fucntion on the word ONE. So what am I missing here or doing wrong here? Is the fact that my h1 is position:fixed have to do something with this?

html:

<html>
<head>
    <title></title>
    <link rel='stylesheet'rel="stylesheet" href='style.css'/>
    <script type="text/javascript" src="script.js"></script>    
</head>

<body>
    <h1><span id="ONE">ONE</span><br><span id="TWO">TWO</span><br><span id="THREE">         THREE</span><br></h1>
</body>
</html>

css for h1:

h1 {position:fixed;
left:14px;
bottom:36px;
margin-bottom:15px;
line-height:40px;
}

css code for ONE:

#ONE {
  font-family:broadway;
  font-size:80px;
  color:#880303;
}

jQuery function for ONE:

$(document).ready(function() {
  $('#ONE').slideDown('slow');    
});
Was it helpful?

Solution

  • You've given your items fixed position, so they cannot slide.
  • And you've not hidden the item you're sliding down, so it cannot be made to appear. (See also jQuery slideDown() animation not working)
  • I think a span cannot slide to begin with, I've changed it to div.

HTML:

<body>
    <div id="ONEdiv"><h1><span id="ONEspan">ONE</span></h1></div>
    <div id="TWOdiv"><h1>TWO</h1></div>
    <div id="THREEdiv"><h1>THREE</h1></div>
</body>

JS:

$(document).ready(function() {
    $('#ONEdiv').slideDown('slow');
});

CSS:

h1 {
line-height:40px;
}

#ONEdiv {
    display:none;
}

#ONEspan {
  font-family:broadway;
  font-size:80px;
  color:#880303;
}

http://jsfiddle.net/2uJJ6/3/

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top