顯示帶有淡入淡出效果以及背景div的隱藏文字？

我在主文本上單擊時應用了淡入淡出效果。但它背後的div是
有點粗糙的效果。隱藏文本顯示淡入效果，但div不。
我怎樣才能使div與文本一起褪色。繼承人小提琴。 http://jsfiddle.net/BreMW/826/顯示帶有淡入淡出效果以及背景div的隱藏文字？

$(document).ready(function(){ 
 
    $(".toggle").click(function(){ 
 
     $(this).find(".hide").fadeToggle(); 
 
    }); 
 
});

.hide { 
 
    display: none; 
 
} 
 
@import url(https://fonts.googleapis.com/css?family=Questrial); 
 

 
    .spcredit{ 
 
    color:#666666; 
 
    font-family: 'Questrial', sans-serif; 
 
    text-transform:uppercase; 
 
    font-size:9px; 
 
    } 
 
.category { 
 
width:440px; 
 
padding-top:10px; 
 
margin-bottom:40px; 
 
background:white; 
 
text-align:justify; 
 
box-shadow:0px 3px 10px rgba(0,0,0,.15) 
 
}

<div class="category" style="line-height:150%;"><center> 
 

 

 
<div class="spcredit"> 
 
<div class="toggle"><a href="javascript:void(0);">text1</a> 
 
<div class="hide"> 
 
hidden text1 
 
</div></div> 
 

 
</div>

出於某種奇怪的原因，它不會在預覽工作。下面是 FIDDLE.

來源

2015-12-17 Vizz

您需要從'.category'中取出'.hide'元素。像[this]（http://jsfiddle.net/BreMW/829/）。 – lmgonzalves

使用slideToggle()，而不是fadeToggle()

編輯：如果你想有衰落，滑動你需要使用另一個包裝爲。編輯fiddle

來源

2015-12-17 15:40:41 okolimar

比我的手動執行好得多：D –

我該如何提高滑動速度？ – Vizz

請參閱http://api.jquery.com/slidetoggle/您可以調整持續時間參數 – okolimar

問題出在您的div與類category。它將其高度調整爲新元素，使其不在動畫中。

以下創建一個體面的動畫。

var hidden = true; 
$(document).ready(function(){ 
    $(".toggle").click(function(){ 
     if (hidden) { 
     $(".category").animate({ 
      height: '+='+ $(".category").height() + 'px' 
     }, 1000); 
     hidden = false; 
     } 
     else { 
     $(".category").animate({ 
      height: '-='+ $(".category").height()/2 + 'px' 
     }, 1000); 
     hidden = true; 
     } 
     $(this).find(".hide").fadeToggle(); 
    }); 
});

這裏有一個fiddle

來源

2015-12-17 15:40:56

你可以在$(this)使用.parent()，然後調用.toggle()，而不是fadeToggle()。您也可以選擇速度。在此處查看代碼Fiddle

來源

2015-12-17 16:46:42 dirgepye

顯示帶有淡入淡出效果以及背景div的隱藏文字？

回答

相關問題