jQuery UI： - スイッチクラスですが、ホバー効果を追加しますか？

Question

"li"内の "p"タグにクラスを追加するためのjQueryコードがあります...しかし、どうすればこれをもっとストレートなスイッチではなくトランジション効果を追加すると面白くすることができますか？

コード：

$(document).ready(function() { 
    $('li').hover(function() { 
     $('p', this).toggleClass('hovered'); 
    }); 
}); 

Answer 1

animate機能を確認し、次の2つのクラス間の遷移をアニメーション化することができます。

編集：申し訳ありませんが、間違った方法です。あなたが探しているのは、switchClassメソッドです。

ここにswitchClassのdemoがあります。クラスが2つあり、クラスを切り替える場合に便利です。単一のクラスを追加/削除したい場合は、Wouter Jの答えをご覧ください。

更新：これが動作するには2つのクラスが必要です。 switchClassでは、jQuery UIが動作する必要があります。ここでは例です：

HTML：

<li> 
    <p class="regular">Test</p> 
</li> 

CSS：

p.regular { color:red } 
p.hovered { color:blue } 

はJavaScript：

$(document).ready(function() { 
    $('li').hover(function() { 
     $('p', this).switchClass('regular','hovered', 2000); 
    },function() { 
     $('p', this).switchClass('hovered','regular', 2000); 
    }); 
}); 

Answer 2

var clone = $("<p>"); 
$('div').hover(
    function() { 
      clone.remove(); 
      clone = $("p", this).clone(); 
      $("p", this).after(clone); 
      clone 
       .hide() 
       .css({ 
        position: "absolute", 
        top: $("p", this).offset().top, 
        left: $("p", this).offset().left, 
        width: $("p", this).width(), 
        height: $("p", this).height(), 
        "z-index": 2 
       }) 
       .addClass("hovered") 
       .fadeIn(); 
    }, 
    function() { 
      clone 
       .fadeOut("normal", function() { 
        $(this).remove(); 
       }); 
    } 
); 

Answer 3

あなたはを追加することでeffectさえadd多くをすることができ、これを試してみてくださいfedeInでとfadeOut

$(document).ready(function() { 
    $('li').hover(function() { 
    $('p', this).fadeIn(function(){ 
     $(this).addClass('hovered'); 
    }); 
    },function(){ 
    $('p', this).fadeOut(function(){ 
     $(this).removeClass('hovered'); 
    }); 
    }); 
}); 

Answer 4

あなたはjQueryのUIを使用しているので、あなたは、期間がフェードの期間である.toggleClass(class, duration)を、使用することができます。

$(document).ready(function() { 
    $('li').hover(function() { 
    $('p', this).toggleClass('hovered', 1000); // 1000ms = 1s 
    }); 
});