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 中重新绘制图表。在这个细节视图中,我打开了一个按钮,让用户返回到整体视图。

此代码一次可以正常工作(从整体图表到详细图表并返回到整体图表)。第二次,当它进入第三步时,它会将整个图表淡入,再次淡出,然后再淡入。第三次,它会这样做三次。第四次,四次。等等。我不知道什么会创建这样的循环!

我试过移动 $('#chart').fadeTo(400,1); 在回调中,这最终会使整个图表的显示时间延长两倍(或三倍或四倍)。这段代码有问题,还是我可能在 showFullChart 中搞砸了?

4

3 回答 3

2

每次运行时,它都会为元素fullViewButton()分配另一个相同的.click()处理程序。'input#fullChart'

因此,当它实际被单击(或触发)时,它会运行迄今为止已分配的处理程序的累积。

您应该只将.click()处理程序分配'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 回答