JQueryのフェードインまたはフェードアウト

Question

私はテキストの変更でdivをフェードインしたい、私は小さな機能を作ったが動作していない。それは値を変えますが、それを退色させません。

$(function(){ 
    $('.jqTransformSelectWrapper').find('ul').find('a').click(function(){ 
     var cityVal= $('.jqTransformSelectWrapper').find('ul').find('.selected').text(); 
     var capCity= cityVal.toLowerCase(); 

     if(capCity == "first"){ 
      $('#flightPrice').text('1').fadeOut('slow');    
     } 
    }) 
}) 

// HTML

<a index="1" href="#" class="selected">first</a> 

<span id="flightPrice">val</span> 

Answer 1

あなたは、そのフェードアウトスパン内のテキストをラップしたい：

<div class="button"><span>TEXT!</span></div> 

を、あなたがその意志のでfadeOutを使用したくありませんfadeOutが終了し、もうスペースを占有しなくなると、テキストが消えるのでボタンのサイズを変更してください。

$(".button").click(function(){ 
    $(this).find("span").animate({opacity:0},function(){ 
     $(this).text("new text") 
      .animate({opacity:1}); 
    }) 
}); 

http://jsfiddle.net/8Dtr6/

EDIT：代わりに、不透明度アニメーションわずかな修正を、限り、あなたはすぐにそれに戻ってフェードインとして少なくともクロムで、fadeInとfadeOutを使用するには問題ではないようです。私は多分少しのブラウザではわずかなちらつきが見えると思うかもしれませんが、間違っている可能性があります。おそらく

コールバックを避けるために、キューを使用してビットクリーナー：

$(".button").click(function(){ 
    $(this).find("span") 
     .animate({opacity:0}) 
     .queue(function(){ 
      $(this).text("new text"); 
      $(this).dequeue() 
     }) 
     .animate({opacity:1}); 
}); 

http://jsfiddle.net/8Dtr6/2