CODEWITHSUNDEEP
jqueryjquery-ui
sawa
sawa

Reputation: 168259

Sustaining highlight

I want to highlight a dom object using jquery. I found out a way using effect from jquery ui:

$('#foo').hover(function(){$('#bar').effect("highlight");});

but this takes effect only when the mouse move in/out to #foo. I want the effect to sustain during when the mouse is over #foo, and get back to before when the mouse leaves. I tried, this:

$('#foo').mouseover(function(){$('#bar').effect("highlight");});

but still does not work. How can I make the effect sustain?

Upvotes: 0

Views: 66

Answers (3)

Wilq
Wilq

Reputation: 2272

You can also use animation to save the UI color transfer animation when changing between colors.

$('#foo').mouseover(function(){
    $(this).animate({
        backgroundColor: "#ffff99"
    },'fast');
});

$('#foo').mouseleave(function(){
    $(this).animate({
        backgroundColor: "#ffffff"
    },'fast');
});

JS FIDDLE

jq UI color animation demo

Upvotes: 0

pocesar
pocesar

Reputation: 7050

You need an interval (using setTimeout) that is toggled on/off

 var hInterval = null;

 $('#foo').on({
   'mouseenter': function(){
      hInterval = setTimeout(function highlight(){
        $('#bar').effect("highlight", function(){ hInterval = setTimeout(highlight, 100); });
      }, 100);
   },
   'mouseleave': function(){
      clearTimeout(hInterval);
   }
 });

Upvotes: 0

Stefan
Stefan

Reputation: 14893

You can use mouseenter and mouseleave to add effects to add a class to you element. Sample: HTML: 

<div id="foo">
    <p>Hello world</p>
</div>

JS:

$('#foo').mouseenter(function(){$(this).addClass("highlight");});
$('#foo').mouseleave(function(){$(this).removeClass("highlight");});

CSS:

.highlight{
    background-color: red;
}

Fiddler: http://jsfiddle.net/2CL7u/

You can also make this effect with pure HTML and CSS like this: HTML:

<div id="foo">
    <p>Hello world</p>
</div>

CSS:

#foo:hover{
    background-color: red;
}

Fiddler: http://jsfiddle.net/7Qq7n/

Upvotes: 1

Related Questions