slideDow and mouseover on a tr elemnt

JavaScript
1

Hi
Need help on two issues please:

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

2

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?

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

3

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.

4

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();
});