jQuery UI： - 切換類，但添加懸停效果？

我有以下jQuery代碼，當您將鼠標懸停在「li」上時，將類添加到「p」標籤中......但是，如何通過添加轉換效果而不是僅僅是一個直接開關來使這更有趣？jQuery UI： - 切換類，但添加懸停效果？

代碼：

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

來源

2012-01-14 CodeyMonkey

當你說「添加淡入淡出效果」你意味着元素應該「淡入」（不可見，可以慢慢看到），或者只是階級過渡應該平滑（例如：類屬性從最終階級的值「漂移」到最終階級的值）？ – mgibsonbr 2012-01-14 17:07:05

是的，過渡應該是平滑的......就像從紅色漸變爲藍色......而不是首先變黑......目前下面的解決方案似乎首先變黑。 – CodeyMonkey 2012-01-14 17:09:55

更新了我的回答，它應該像您現在說的那樣行事。大多數人使用** fade **這個詞使人感到困惑，因爲它意味着你希望元素在某個點消失/出現。我建議編輯替換此表達式爲「過渡效果」，好嗎？ – mgibsonbr 2012-01-14 17:25:11

檢查animate功能，能夠繪製兩個類之間的過渡。

編輯：對不起，錯誤的方法。你要找的是switchClass方法。

這裏是switchClass的demo。如果您有兩個班，並且想從一個班轉到另一個班，這很有用。如果您只想添加/刪除一個班級，請參閱Wouter J的答案。

更新：看來你需要兩個類才能工作。另請注意，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); 
    }); 
});

來源

2012-01-14 16:57:06 mgibsonbr

差不多......當你將鼠標懸停時，它不會恢復到「常規」......任何想法？ – CodeyMonkey 2012-01-14 17:29:32

@CodeyMonkey當然！ 'hover'接受懸停結束時要運行的附加功能。答案已更新。 – mgibsonbr 2012-01-14 17:34:04

太好了 - 最後確定....淡出有點討厭..例如。跳動......即使設置爲100或200 ......我該如何更改默認效果？ – CodeyMonkey 2012-01-14 17:36:17

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

來源

2012-01-14 16:57:09 noob

嗨，這黑色/ disapears然後淡化到正確的類，任何機會，這可以工作，而無需先穿戴位？ – CodeyMonkey 2012-01-14 17:00:40

文本消失，它跳轉到黑色，它需要一個平穩的過渡。謝謝 – CodeyMonkey 2012-01-14 17:20:26

好的我改變了。 – noob 2012-01-14 19:36:26

試試這個，你甚至add可以更effect加入options中fedeIn和fadeOut

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

來源

2012-01-14 16:57:09

您正在使用jQuery UI，所以你可以使用.toggleClass(class, duration)，其中持續時間是淡出的持續時間：

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

來源

2012-01-14 17:02:29

它似乎沒有工作... $（document）.ready（function（）{（'li'）。hover（function（）{（'p'，this）.toggleClass（ 'hovered'，500）; }）; }）; – CodeyMonkey 2012-01-14 17:05:13

jQuery UI： - 切換類，但添加懸停效果？

回答

相關問題