鼠标悬停时的淡入淡出效果

Question

我需要在鼠标悬停和移出时添加淡入淡出效果。

$(document).ready(function(){
    $("#txtchange").mouseover(function (){
        $('#txtchange').text("My New Txt");
    });
    $("#txtchange").mouseout(function (){
        $('#txtchange').text("Old Txt");
    });
});

Answer 1

您可以使用 jquery 函数 fadeIn()。

$(document).ready(function(){
    $("#txtchange").mouseover(function (){
        $('#txtchange').text("My New Txt").fadeIn( "slow" );
    });
    $("#txtchange").mouseout(function (){
        $('#txtchange').text("Old Txt").fadeIn( "slow" );
    });
});

Answer 2

试试下面的代码

    $(document).ready(function(){    
       $("#txtchange").mouseover(function (){
           $("#txtchange").fadeOut(function() {
             $(this).text("My New Txt").fadeIn();
           });
       });    
       $("#txtchange").mouseout(function (){
          $("#txtchange").fadeOut(function() {
            $(this).text("Old Txt").fadeIn();
          });   
       });    
  });

鼠标悬停时的淡入淡出效果

Fade effect when mouse over and out

javascript

mouseover

mouseout