CODEWITHSUNDEEP
jquerycssslider
ofer dofer
ofer dofer

Reputation: 621

JQuery: Sliding Image down on Mouseover

The fiddle I'm working with: http://jsfiddle.net/Hu4bg/1/

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() {
        $("#img1").slideDown(250);
    });

    $("#leftmenu a").mouseleave(function() {
        $("#img1").slideUp(250);
    });
});

Upvotes: 2

Views: 2545

Answers (3)

Mathew Thompson
Mathew Thompson

Reputation: 56429

You mean like this? http://jsfiddle.net/Hu4bg/3/

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>

<ul>
    <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>
</ul>

Upvotes: 1

Danield
Danield

Reputation: 125523

You could actually do this with pure css by using CSS Animation.

Here's a LIVE DEMO of this.

Upvotes: 0

S.M.Amin
S.M.Amin

Reputation: 509

.hover takes two arguments. One for mouse enter and the other for mouse leave.

$("#leftmenu a").hover(function() {
    $("#img1").slideDown(250);
}, function() {
    $("#img1").slideUp(250);
});

Upvotes: 0

Related Questions