Berdiya Onur Berdiya Onur - 3 months ago 10x
CSS Question

JQuery: Sliding Image down on Mouseover

The fiddle I'm working with:

I'm trying to create a vertical menu and when you mouse over a link, I want an image(a div would be better as it has a content) to slide down and it would never slide up again, rather, when another link is hovered, it will slide down on the last image that slided down and on and on.

I think I should change the z-index values but I don't know how to control this thing via JQuery. Can you give me a quick tip on my fiddle?

$(document).ready(function() {
$("#leftmenu a").hover(function() {

$("#leftmenu a").mouseleave(function() {


You mean like this?

I have condensed the code into one event and changed the way it works (matches ids of multiple image boxes to classes of the links):

$("#leftmenu a").hover(function() {
    $("[id^=img]:not([id=" + $(this).attr("class") + "])").slideUp(250);
    $("#" + $(this).attr("class")).slideDown(250);

I also added 2 more img tags, with IDs that match the classes in the a tags:

<div id="img1">Image here</div>
<div id="img2">Image here</div>
<div id="img3">Image here</div>

    <li> <a class="img1" href="#">Image 1</a></li>
    <li> <a class="img2" href="#">Image 2</a></li>
    <li> <a class="img3" href="#">Image 3</a></li>