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 回答