fadein или fadeout в JQuery

Question

Я хочу, чтобы fadein 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