问题
SOLVED Look at the comments below
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#playlistToggle').click(function(event) {
event.preventDefault();
if($('#playlist').is(":hidden"))
{
$('#playlist').slideUp('medium');
}
else
{
$('#playlist').slideDown('medium');
}
});
});
</script>
<style type="text/css">
#playlist_wrapper
{
bottom: 30px;
height: 75px;
overflow: hidden;
position: fixed;
width: 100%;
background-color: yellow;
}
#playlist
{
background-color: #FF6633;
border: 1px solid #666666;
height: 75px;
width: 920px;
position: relative;
bottom: 0;
margin: 0 auto;
visibility: hidden;
}
</style>
</head>
<a href="#" id="playlistToggle">Toggle Playlist</a>
<div id="playlist_wrapper">
<div id="playlist"></div>
</div>
This script is supposed to slide up the playlist div when you hit the button. However, nothing happens when you hit it. If you change:
if($('#playlist').is(":hidden"))
To:
if($('#playlist').is(":visible"))
And change the css #playlist visibility property from "hidden" to "display", then the div slides up to the top, and slides down to the bottom, the exact opposite of what I want it to do. What am I doing wrong here?
EDIT: To clarify: I need the playlist div to be hidden from the start, and then slide up when I hit the toggle button.
回答1:
An object is only conisdered hidden if
* They have a CSS display value of none.
* They are form elements with type="hidden".
* Their width and height are explicitly set to 0.
* An ancestor element is hidden, so the element is not shown on the page.
It doesnt appear that #playlist meets any of those criteria so therefore the selector is not matching on the #playlist. Can you do away with the .is(':hidden') part and make due without it?
回答2:
.slideUp is a synonym for .hide(albeit with different settings for how the effect is obtained)
likewise
.slideDown is a synonym for .show
all 4 are just preset animations.
If you read the jQuery documentation for slideUp and slideDown they go like this:
slideUp:
Description: Hide the matched elements with a sliding motion.
slideDown:
Description: Display the matched elements with a sliding motion.
Ergo: Use slideDown to make stuff visible and not slideUp
来源：https://stackoverflow.com/questions/4892743/css-div-positioning-and-jquery-slideup-madness