jQuery .addClass和.fadeIn？

所以，我有這些h1元素是鏈接，我想向它們添加一個類，並在該元素被暫停後淡化該類，然後onMouseOut刪除該類，同時淡化該類。但使用淡入淡出功能對我無能爲力。看到它隱藏的元素。有任何想法嗎？jQuery .addClass和.fadeIn？

jQuery(".categories h1 a").hover(
function() { 
    jQuery(this).fadeIn("slow").addClass("active"); 
}, 
function(){ 
    jQuery(this).fadeOut("slow").removeClass("active"); 
}); 
});

謝謝！

編輯:::

jQuery("h1").hover(function() { 
     jQuery(this).stop().animate({ backgroundColor: "#a7bf51"}, 800); 
     },function() { 
     jQuery(this).stop().animate({ backgroundColor: "#FFFFFF"}, 800); 
     }); 
});

來源

2012-05-03 Aaron Brewer

明確請，你想淡入？你想讓鏈接淡入你懸停在h1上的一個？你的代碼會褪色，如果它的工作，只會服務器淡出鏈接，但是你將無法再次淡入。 – b01

不可以。我想在淡入類中添加到h1>標籤。然後在鼠標上淡出 –

@AaronBrewer請參閱>> http://jsfiddle.net/NLChW/4/ << using animate –

嘗試使用jQuery UI .addClass和.removeClass。

$(function() { 
    $(".categories h1 a").hover(function() { 
     $(this).stop(true,true).addClass("active", 500); 
    }, function() { 
     $(this).stop(true,true).removeClass("active", 100); 
    });  
});

DEMO（出於某種原因，它不正確（淡出）首次動畫..但從那時起，它工作正常）

編輯：更新的完整性。

您也可以使用.animate來獲得所需的效果。見下文，

$(function() { 
    $(".categories h1 a").hover(function() { 
     $(this).stop().animate({ 
      backgroundColor: "#a7bf51" 
     }, 800); 
    }, function() { 
     $(this).stop().animate({ 
      backgroundColor: "#FFFFFF" 
     }, 800); 
    }); 

});

DEMO

來源

2012-05-03 21:20:21

這是一個有趣的方式來做到這一點。看看下面的答案，我覺得它更乾淨。是否有你使用停止功能和addClass而不是切換的原因？ –

@ChristopherMarshall .stop的原因是要停止淡入淡出轉換，否則快速懸停在多個鏈接上會同時顯示多個動畫。那麼你將能夠看到它，當你有更長的持續時間（1000毫秒） –

有趣，感謝您的解釋！我不應該對用戶鼠標速度做出假設。 –

聽起來像是你想要的風格類的淡入你應該看看動畫（）爲：

淡入淡出只是在元件。

來源

2012-05-03 21:08:21

好的，我試過使用這種動畫功能，似乎無法使它現在工作...查看更新的問題。 –

@AaronBrewer請參閱>> http://jsfiddle.net/NLChW/4/ <<使用動畫 –

@Vega：Heya Vega，這是行不通的。 http://squaredcube.com/beta/ –

我不認爲你可以跨類淡入淡出，但你可以使用animate函數。 animate允許您在指定時間內影響任何css變量。

我知道去除CSS文件中的一些造型，但同樣，我不認爲jQuery將穿越類之間褪色。

來源

2012-05-03 21:10:40 jray

好的，我試過使用這種動畫功能，似乎無法使它現在工作...查看更新的問題。 –

如果你加載了jQuery UI庫，你可以爲toggleClass函數設置一個額外的參數。

通過css設置你的不透明度。

h1 a { 
    opacity:0.8; 
} 

h1 a.hovered { 
    opacity: 1.0; 
}

然後

jQuery(".categories h1 a").hover(function(e) { 
    $(this).toggleClass('hover', 1000); 
}

的1000是對事件毫秒計數器。所以這個效果應該在一秒鐘內褪色到1.0不透明度並且在沒有徘徊時在1秒內淡出。

來源

2012-05-03 21:11:18

這就是爲什麼我說「如果你有jQuery UI庫加載」。 ;} –

試試這個，和這裏的的jsfiddle（enter link description here）：

<script type="text/javascript"> 
    jQuery(".categories h1").hover(function() { 
      jQuery(this).stop().animate({ "background-color": "#a7bf51"}, 800); 
      jQuery(this).addClass("active"); 
      jQuery(this).find("a").fadeIn("slow"); 
     }, 
     function() { 
      jQuery(this).stop().animate({ "background-color": "#FFFFFF"}, 800); 
      jQuery(this).addClass("active"); 
      jQuery(this).find("a").fadeOut("slow"); 
    }); 
</script> 
<style type="text/css"> 
    .categories h1 { 
     background-color: rgb(200, 200, 200); 
     display: block; 
     padding: 5px; 
     margin: 5px; 
     width: 100px 
    } 
    .categories h1 a { 
     display: none; 
    } 
</style> 
<div class="categories"> 
    <h1><a href="#">Item 1</a></h1> 
    <h1><a href="#">Item 2</a></h1> 
    <h1><a href="#">Item 3</a></h1> 
</div>

來源

2012-05-03 21:37:08 b01

如果你不想要使用jQuery UI，因爲這將是一個額外的負擔，你可以請執行以下操作：

（在我的應用程序中使用「隱藏」引導類時對我有用）

淡入緩慢，同時消除類：

$('.myClass').removeClass('hidden').fadeOut(0).fadeIn(10000)

淡出慢，添加類，然後漸退中：

$('.myClass').fadeOut(1000, function(){ 
    $(this).addClass('hidden'); //or any other class 
}).fadeIn(10000)

希望這將簡化某人的任務！

來源

2016-07-16 17:35:10

jQuery .addClass和.fadeIn？

回答

相關問題