1

JS コード:

var forma = $('form#mali_oglas'),
    pomoc = $('div[role=pomoc]'),
    div = $('.mali_oglas_pomoc'),
    input = forma.find('input, textarea');   

    input.on('click', function(){
        var name = $(':input:focus').attr("name")
        pomoc.fadeOut('fast', function(){            
            div.find("[data-pomoc='" + name + "']").fadeIn('slow');            
            console.log(name);
        });
    });

HTML コード:

<div class="mali_oglas_pomoc">
    <div data-pomoc="name" role="pomoc">
        1Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi pretium, urna nec varius sollicitudin, erat urna accumsan sapien, vel interdum enim risus id mi. Class aptent taciti sociosqu ad litora.
    </div>
    <div data-pomoc="body" role="pomoc">
        2Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi pretium, urna nec varius sollicitudin, erat urna accumsan sapien, vel interdum enim risus id mi. Class aptent taciti sociosqu ad litora.
    </div>.....    
</div>

問題の div の CSS:

div[role="pomoc"] {position: absolute; top: 45px; right: 0;width: 250px; display: none}
div[role="pomoc"]:first-child {display: block}

動作していますが、少し奇妙です。最初に対象の div に表示ブロックを適用し、次にそれをフェードアウトしてフェードインします。何が起こっているのでしょうか?

リンク: http://jsfiddle.net/AY2B3/

4

1 に答える 1

1

完了したアニメーションごとに、fadeOut コールバックが 1 回発生します。あなたの例では、 pomoc に複数の要素が含まれているため、コールバックが複数回実行されます。この奇妙さは、おそらく、同じ要素で fadeIn を複数回呼び出すことに関連する視覚的なアーティファクトです。

于 2012-06-05T11:30:20.240 に答える