1

以下のコードは機能しますが、何らかの理由で$（'＃chart'）。fadeToコールバックが本当に奇妙なループを作成しているようです。

function fullViewButton(zoom){
if (zoom == 0){
    $('input#fullChart').hide();
} else {
    $('input#fullChart').show();
    $('input#fullChart').click(function(){
        $('#chart').fadeTo(400,0, function(){
            showFullChart();
        });
        $('#chart').fadeTo(400,1);
    });
}

基本的に、私は全体的な統計を示すグラフをプロットしています。ユーザーはグラフ化して見たいサブセットを選択でき、コードは同じdivにグラフを再描画します。この詳細ビューでは、ユーザーが全体ビューに戻ることができるボタンを表示します。

このコードは一度は正常に機能します（全体的なグラフから詳細なグラフに移動し、全体的なグラフに戻ります）。2回目は、3番目のステップに到達すると、チャート全体をフェードインし、再びフェードアウトし、フェードインします。3回目は、これを3回行います。4回目、4回。など、このようなループを作成するものが何であるかわかりません！

$（'＃chart'）。fadeTo（400,1）;を移動してみました。コールバック内では、チャート全体が表示されるまでに2倍（または3倍または4倍）長くかかることになります。このコードに何か問題がありますか、それともshowFullChartで何かを台無しにした可能性がありますか？

4

3 に答える 3

2

実行するたびfullViewButton()に、別の同一の.click()ハンドラーが'input#fullChart'要素に割り当てられます。

したがって、実際にクリック（またはトリガー）されると、これまでに割り当てられたハンドラーの累積が実行されます。

.click()ハンドラーは1回だけ割り当てる必要があり'input#fullChart'ます。

他のコードがどのように見えるかはわかりませんが、おそらく次のようなものが必要です。

   // This assigns the click handler
$('input#fullChart').click(function(){
    $('#chart').fadeTo(400,0, function(){
        showFullChart();
    });
    $('#chart').fadeTo(400,1);
});

function fullViewButton(zoom){
if (zoom == 0){
    $('input#fullChart').hide();
} else {
    $('input#fullChart').show().click();  // <-- this invokes the click handler

}
于 2011-07-15T19:59:57.760 に答える
0

ハ、私がこれを何回行ったかをあなたに言うことはできません、理由はあなたがfullViewButton複数回呼び出しているので、そして毎回fadeTo「クリック」で関数を再追加するからです。

簡単な修正のためにあなたはただ置くことができます

$('input#fullChart').click(function(){
    $('#chart').fadeTo(400,0, function(){
        showFullChart();
    });
    $('#chart').fadeTo(400,1);
});

の外fullViewButton()

于 2011-07-15T20:03:12.717 に答える
0

stop()次のように、アニメーションと一緒にメソッドを使用してみてください。

function fullViewButton(zoom){

var fChart = $('input#fullChart');
var chart = $('#chart');

if (zoom == 0){
    fChart.css({display:'none',opacity:0});
} else {
    fChart.css({display:'block',opacity:1});
    fChart.click(function(){
        chart.stop().animate({opacity:0}, 400, function(){
            $(this).css({display: 'none'});
            showFullChart();
        });
        chart.stop().css({display:'block',opacity:0}).animate({opacity:1}, 400);
    });
}
于 2011-07-15T20:04:54.510 に答える