0

テキストの変更で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>
4

1 に答える 1

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/

編集: すぐにフェードインする限り、わずかな修正がfadeInありfadeOut、少なくとも chrome では使用するのに問題はないようです。ブラウザが小さいとちらつきが見られると思いますが、間違っている可能性があります。

コールバックを回避するためにキューを使用すると、おそらく少しきれいになります。

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

于 2012-04-16T09:52:51.320 に答える