CODEWITHSUNDEEP
jquerycssjquery-uihovertoggleclass
Jens Törnell
Jens Törnell

Reputation: 24768

jQuery UI ToggleClass CSS hover

I have a website at http://www.presentbladet.se (unfinished). When I hover the "Test product" a magnifying glass appears. So far, so good.

Fade in - but keep hover in CSS

I want the transition to be smooth with a fade in effect. I still want to keep as much as possible in the CSS and just make the delay / fade in jQuery / jQuery UI.

I use this code on my site:

$("li.item a").hover(function() {
    $(this).toggleClass("hover", 10000);
        return false;
    });

Delay part don't work

It works almost. It toggles the class "hover" but the delay part don't work at all. The transition is instant instead of fade in slow.

Upvotes: 2

Views: 4307

Answers (4)

fliptheweb
fliptheweb

Reputation: 1166

You must add toggleClass part of jQuery UI for toggleClass animation. Now your page has only the core, widgets and tab. Go to download page and select Effects Core

Upvotes: 4

Akhil Thayyil
Akhil Thayyil

Reputation: 9403

/* i Don't know exactly whether this is your requirement , if no please post a more specific code , try this code first */
    $("li.item a").hover(
    function() {$(this).addClass("hover");},
    function() {$(this).removeClass("hover");}
    );

Upvotes: 0

Keith.Abramo
Keith.Abramo

Reputation: 6955

jQueryUI extends the core jQuery.animate function to allow you to specify a class for the element(s) to animate to.

From the docs: "...It's heavily used by the class transition feature..."

You might want to give that a go. Something like this.

$("li.item a").hover(function() {
    $(this).animate("hover", 10000);
    return false;
});

Upvotes: 1

Michael Davis
Michael Davis

Reputation: 267

Does this help?

jQuery("#divId").fadeIn(500);

You could probably just add .fadeIn(500) to your function that's calling the image on mouseOver, I think. Adjust the number to adjust the speed or just use the words fast or slow.

Upvotes: 0

Related Questions