Javascript FadeinMouseOverjQuery

我知道你可以在鼠标上方使用

fadeIn

和

fadeOut

，但我只是想知道当你将背景图像添加到css中时该怎么做：

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

这就是我现在使用的。但是fadeIn不起作用

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

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

像这样试试

---

像这样试试。

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

---

你试过hover（）函数吗？

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

---

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

更简单的方法是：

---

更简单的方法是使用：

试试这个：

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

尝试先添加css

，然后淡入
尝试以下操作：

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

尝试先添加css
然后淡入
这可能是你想要的，它使用不透明度的动画效果

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

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

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

将背景图像设置为
opacity:0
，然后将其动画设置为
opacity:1
将背景图像设置为
opacity:0
，然后将其动画设置为
opacity:1
此外，Jquery操作一个接一个地进行查询，因此我必须在fadeout和fadein之前使用Stop（）方法。像这样：stop（）.fadeIn（）。我不认为这会导致类似于animate的事情，但你可以使用它。而且，Jquery操作一个接一个地进行查询，所以我必须在fadeout和fadeIn之前使用stop（）方法。比如：stop（）.fadeIn（）。我不认为这会导致类似动画的事情，但你可以使用它。