jQuery fadeTo callback is looping for no apparent reason

The below code works, but for some reason the $('#chart').fadeTo callback seems to create a really weird loop.

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);
    });
}

Basically, I'm plotting a graph that shows overall statistics. The user can pick a subset he wants to see charted, and the code will re-draw the graph in the same div. In this detail view, I bring up a button that lets the user go back to the overall view.

This code works fine once (going from overall chart to detail chart and back to overall chart). The second time, when it gets to the third step, it fades the overall chart back in, fades it out again, and fades it back in. The third time, it does this three times. The fourth, four times. Etc. I can't figure out what would be creating a loop like this!

I've tried moving $('#chart').fadeTo(400,1); within the callback, which just ends up making the whole chart take two (or three, or four) times longer to show up. Is t开发者_高级运维here something wrong with this code, or have I possibly messed up something in showFullChart?

---

Each time fullViewButton() runs, it's assigning another identical .click() handler to the 'input#fullChart' element.

So when it is actually clicked (or triggered), it runs the accumulation of handlers that have been assigned thus far.

You should assign the .click() handler to 'input#fullChart' only once.

Not sure what your other code looks like, but you probably want something like this:

   // 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

}

---

ha, cant tell you how many times i've done this, the reason is because you're calling fullViewButton multiple times, and each time re-appending the fadeTo function on 'click'.

for a quick fix you can just put

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

outside of fullViewButton()

---

Try using the stop() method along with animate, like so:

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);
    });
}