淡入淡出鼠标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 + ")"});              
    });

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

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

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

bubble代表什么对象？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}
   }); 
});