jquery css淡入淡出文字

我試圖在我的水平滑塊淡入淡出我的文字內容。實際上，當我在#directions菜單項中時，我想淡化我的文本。我嘗試了一些東西，但似乎不起作用。jquery css淡入淡出文字

在我的HTML

，我有一個id div標籤：

<div id="directions" class="panel"> 
     <h2>Directions</h2> 

     <div id="test"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div> 
    </div>

我定義在我的CSS一樣，這個div ID =測試：

#test p { 
    opacity: 0; 
    font-size: 21px; 
    margin-top: 25px; 
    text-align: center; 

    -webkit-transition: opacity 5s ease-in; 
     -moz-transition: opacity 5s ease-in; 
     -ms-transition: opacity 5s ease-in; 
     -o-transition: opacity 5s ease-in; 
      transition: opacity 5s ease-in; 
} 

#test p.load { 
    opacity: 1; 
}

My Jquery：

$('#wrap').find('#test').removeClass('load'); 
       $target.addClass('load');

你知道我在做什麼錯嗎？問候， Jarod。

來源

2014-04-23 user979974

不是一個答案，但我認爲所有的問題應該是建立這樣的:) –

@JoakimM這個問題越來越因爲滑塊upvotes :)但答案.....等.....不總結如此....關心所有代碼....並得到答案後可能或:)）...：）） –

更改以下

#test p.load{ 
    opacity: 1; 
}

這個

.shown #test p{ 
    opacity: 1; 
}

http://jsfiddle.net/4RvWY/8/

來源

2014-04-23 08:52:08 koningdavid

Thx koningdavid。正是我在找什麼。它工作正常。 – user979974

看來效果只有一次。我需要每次在#directions下重複該效果。它適用於我的圖像，但不適用於我的文本。你知道我需要改變嗎？ – user979974

@ user979974使用.shown #test p而不是.load #test p，我更新了我的答案 – koningdavid

它應該是更容易的解決方案。

CSS：

#test p { 
    display: none; 
    font-size: 21px; 
    margin-top: 25px; 
    text-align: center; 
}

的Javascript：

$('#test p').fadeIn(1000)

的jsfiddle：http://jsfiddle.net/tykpL/

來源

2014-04-23 09:02:23

jquery css淡入淡出文字

回答

相關問題