Question

i want to fadein div on its text change, i made a small function but it is not working. it changing value but not fading it.

$(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

You want to wrap the text in a span then fade that out:

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

and you don’t want to use fadeOut because that will change the size of your button as the text will disappear once fadeOut ends and no longer take up space. Instead animate the opacity:

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

http://jsfiddle.net/8Dtr6/

EDIT: Slight correction, as long as you immediately fade back in it does not seem to be an issue to use fadeIn and fadeOut, at least in chrome. I would expect maybe in lesser browsers to see a slight flicker, but could be wrong.

Possibly a bit cleaner using queue to avoid callbacks:

$(".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