| using jQuery's child selector
children of a class, class as variable |
ctoz
msg:4298555 | 10:01 pm on Apr 15, 2011 (gmt 0) |
What's the syntax for accessing the children of a class, where the class is a variable?
The html structure is multiple divs like this:
<div class="class1 class2 class3">
<p class="x"> lorem</p>
<p class="y"> ipsum</p>
<p class="z"> yadda</p>
</div>
The function does two color changes before going to 'display:none'
function exIt(cl) {
$(cl + ' > p').animate({color:"#ddd"}, 600, function() {
$(cl + ' > p').delay(800).animate({color:"#333"}, 1600, function() {
$(cl + ' > p').delay(800).hide();
});
});
}
called with "exIt('.class1');"
(There's a structural reason for accessing the child <p> tags, rather than just the parent <div>s. Some <p> tags in some <div>s will have previously had a style change applied: if the changes are now applied only to the parents, some children won't change… at least not till they're hidden).
Anyway: the function isn't working: but it doesn't generate a FF error message, and doesn't stop subsequent chained functions from operating.
The syntax $(cl + ' > tag') works ok in another function.
Can't be too far off... ?
|
Fotiman
msg:4298608 | 10:59 pm on Apr 15, 2011 (gmt 0) |
Did you remember to include the jQuery UI library (vs. only the jQuery library)?
[api.jquery.com...]
Animation Properties and Values
All animated properties should be animated to a single numeric value, except as noted below; most properties that are non-numeric cannot be animated using basic jQuery functionality. (For example, width, height, or left can be animated but background-color cannot be.)
|
|
The jQuery UI project extends the .animate() method by allowing some non-numeric styles such as colors to be animated. The project also includes mechanisms for specifying animations through CSS classes rather than individual attributes.
|
|
[jqueryui.com...]
Your example worked for me once I included the jQuery UI library as well:
<html>
<head>
<style type="text/css">
p {
color: red;
}
</style>
<title>Test</title>
</head>
<body>
<form action="#">
<input type="button" value="Click Me" onclick="exIt('.class1');">
</form>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/jquery-ui.min.js"></script>
<div class="class1 class2 class3">
<p class="x"> lorem</p>
<p class="y"> ipsum</p>
<p class="z"> yadda</p>
</div>
<script>
function exIt(cl) {
$(cl + ' > p').animate({color:"#0f0"}, 600, function() {
$(cl + ' > p').delay(800).animate({color:"#00f"}, 1600, function() {
$(cl + ' > p').delay(800).hide();
});
});
}
</script>
</body>
</html>
|
|
|
Fotiman
msg:4298609 | 11:00 pm on Apr 15, 2011 (gmt 0) |
Side note, I used different color values just to make it more obvious that the animation was taking place.
|
ctoz
msg:4298788 | 6:56 am on Apr 16, 2011 (gmt 0) |
Thanks! Your demo works fine for me too.
I had both jQuery and UI downloaded and linked, forgot to mention UI.
So there's more testing to do: if the syntax is ok, and that's good to know, there's gotta be a stray glitch somewhere...
|
|
|
