FadeIn Mouseover Jquery

Question

我知道您可以在鼠标悬停时fadeIn和fadeOut但我只是想知道如何在将背景图像添加到css时执行此操作：

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

这是我目前使用的。但是fadeIn不起作用。

理想情况下，图像背景会发生变化，但是当鼠标不再悬停时，过渡时会有淡入淡出和淡出。

Answer 1

试试这个：

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

首先尝试adding css then fade it in。

Answer 2

使用hover()更简单的方法：

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

Answer 3

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

试试这个..

Answer 4

气泡代表什么对象？ div还是这整页？

您是否尝试过hover（）函数？

Answer 5

这可能是你想要它使用不透明度的动画效果

$(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}
   }); 
});