JQuery Slide Problem (i can make it slide DOWN, but not UP)
greetings. i appreciate any help. i'm currently attempting to use jquery so that when the mouse hovers over a div, another div "slides" into view. the div is an image of a sunflower.
-
<script type="text/javascript">
$(document).ready(function() {
var inprog = 0;
$("#ourcommitment").hover(function() {
if (inprog == 0) {
inprog = 1;
$("#sf1").slideDown(400);
}
}, function() {
$("#sf1").slideUp(400, function() {inprog = 0;});
});
});
</script>
#ourcommitment is the div that activates the sliding sunflower (or #sf1).
when i mouse over #ourcommitment, #sf1 slides down and shows the image first. when i mouseout, #sf1 slides up and the image disappears.
how can i reverse this effect? so that it slides UP and into view onmouseover, then slides DOWN and out of view onmouseout.
also- i will be using this across multiple divs & sunflowers, so i imagine i will have to reproduce each one, e.g.:
-
<script type="text/javascript">
$(document).ready(function() {
var inprog = 0;
$("#ourcommitment").hover(function() {
if (inprog == 0) {
inprog = 1;
$("#sf1").slideDown(400);
}
}, function() {
$("#sf1").slideUp(400, function() {inprog = 0;});
});
});
$(document).ready(function() {
var inprog = 0;
$("#ourservices").hover(function() {
if (inprog == 0) {
inprog = 1;
$("#sf2").slideDown(400);
}
}, function() {
$("#sf2").slideUp(400, function() {inprog = 0;});
});
});
</script>
again, i really appreciate any help you can give me. i've tried simply switching the "slideDown" and "slideUp" functions but it doesn't work.