slideDow and mouseover on a tr elemnt

[meera_kibe]

Hi
Need help on two issues please:

1.
-----------------------------------------
html file
........
.
.
..

<table id="tabs">
<tr><td>Apple</td> <td>Fruit</td></tr>
<tr><td>Audi</td> <td>Car</td></tr>
<tr><td>Ant</td> <td>Insect</td></tr>

</table>
.
.

.
.

<script>


$(document).ready(function(){
$('#tabs tr').mouseover(function(){
$(this).addClass('zebra'); }); //on mouseover on a tr the background color should change
});//ready
</scirpt>


Here is a simple table with id="tabs"
----------------------------------------
css file

.zebra{
background-color:green;
}

if i do #tabs td it works but not #tabs tr???
--------------------end of question 1-----------------


2'nd question

$('div').slideDown(1000); does not work , slideUp works but not slideDown ?


---------------end of question 2-------------
Many Thanks
Meeraa

[paul_wilkins]

if i do #tabs td it works but not #tabs tr

With #tabs td the effect seems to work on each cell, and with #tabs tr it seems to work on each row.

Are you expecting something different, or are experiencing different results?

2'nd question

$('div').slideDown(1000); does not work , slideUp works but not slideDown ?

An element needs to first be hidden, before slideDown seems to work for it.

[Jason__C]

An element needs to first be hidden, before slideDown seems to work for it.

Whats the logic behind that? I mean, the element has to be hidden before it could work? That was assine on jQuerys part. Unless I am off somewhere. In this situation pure JS would be the best approach, especially if the OP wants it shown before moving.

[paul_wilkins]

Whats the logic behind that? I mean, the element has to be hidden before it could work?

Have a read of the slideDown documentation page. That's the impression that I get from what it says, and all of the examples that they give there.

Simple tests like this also help to confirm that such an impression is correct:

<button id="slidehidden">Slide down the originally hidden div</button>
<button id="slidepartial">Slide down the partially shown div</button>
<button id="slideshown">Slide down the shown div</button>
 
<div id="hidden">Originally hidden</div>
<div id="partiallyshown">Partially shown</div>
<div id="shown">Originally shown</div>
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
...
</script>

$('#hidden').hide();
$('#slidehidden').on('click', function () {
    $('#hidden').slideDown();
});
 
$('#partiallyshown').css({height: 10, overflow: 'hidden'});
$('#slidepartial').on('click', function () {
    $('#partiallyshown').slideDown();
});
 
$('#slideshown').on('click', function () {
    $('#shown').slideDown();
});