CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Kiwimoisi
Kiwimoisi

Reputation: 4192

FadeIn Mouseover Jquery

I know you can fadeIn and fadeOut on mouseover but I was just wondering how to do it when you add the background image to the css:

$(document).ready(function() {      
     $('.bubble').mouseover(function() {             
         $('.bubbleSpeach').fadeIn("slow");          
         var path= this.id + ".png";                 
         $('.bubbleSpeach').css({'background-image': "url(" + path + ")"});              
    });

This is what I use at the moment. But the fadeIn doesn't work.

Ideally, the image background would change but with a fade in transition and a fadeout when the mouse is not hover anymore.

Upvotes: 0

Views: 1373

Answers (5)

Matthias Wegtun
Matthias Wegtun

Reputation: 1261

this might what u want it uses animate effect with opacity

$(document).ready(function() {
 $('bubbleSpeach').css({'background':'url/img.png'})      
 $('.bubble').mouseover(function() {             
    $('.bubbleSpeach').animate({opacity:0)},1000 function() {
        $('bubbleSpeach').css({'background':'url/img2.png'})
        $('.bubbleSpeach').animate({opacity:1}),1000}
   }); 
});

Upvotes: 0

Jai
Jai

Reputation: 74748

Try with this: 

$('.bubble').on({
       mouseover:function() {                       
           var path= this.id + ".png";                 
           $('.bubbleSpeach').css({'background-image': "url(" + path + ")"}).fadeIn("slow");
       },
       mouseout: function(){
           $('.bubbleSpeach').fadeOut("slow");
       }
});

Try adding css first then fade it in.

Upvotes: 2

dsgriffin
dsgriffin

Reputation: 68626

An easier way would to be use hover():

$("#id").hover(function(){
    $("#exampleText").fadeIn("slow");
},
function(){
    $("#exampleText").fadeOut();
});

Upvotes: 1

Robert Mailloux
Robert Mailloux

Reputation: 397

What object does bubble represent? The div or is this the whole page?

Have you tried the hover() function?

Upvotes: 0

sasi
sasi

Reputation: 4328

$(document).on("mouseover",".bubble",function() {    
//your code..for fadeIn
 });

try like this..

Upvotes: 0

Related Questions