CODEWITHSUNDEEP
jquery
Filip Mašek
Filip Mašek

Reputation: 11

Slow jQuery - long load times?

I am completly new to jQuery. It's possible that I missed some basic things and my code looks like piece of junk. Feel free to ignore this one if you like.

I wrote this code, but sometimes, the browser just doesn't respond to my "clics" and doesn't do anything. Then it works properly, after some time it's stuck again. Any ideas? Thanks a lot! 

$(document).ready(function() {

$("#text2").hide();
$("#text3").hide();

$('#ball1').click(function() {
    $('#text2').fadeOut('slow');
    $('#text3').fadeOut('slow');
    $('#text1').fadeIn('slow');
    $("#arrow").animate({left:'40px'});

 $('#ball2').click(function() {
    $('#text1').fadeOut('slow');
    $('#text3').fadeOut('slow');
    $('#text2').fadeIn('slow');
    $("#arrow").animate({left:'400px'});

 $('#ball3').click(function() {
    $('#text2').fadeOut('slow');
    $('#text1').fadeOut('slow');
    $('#text3').fadeIn('slow');
    $("#arrow").animate({left:'770px'});
});
});
  });
  });

Upvotes: 0

Views: 43

Answers (1)

Nix
Nix

Reputation: 6028

I think your scope is messed up. You forget to close each function, but instead nest them all in the first. It's probably slow because you keep assigning the click events every time you click #ball1. Replace it with this:

$(document).ready(function() {

  $("#text2").hide();
  $("#text3").hide();

  $('#ball1').click(function() {
    $('#text2').fadeOut('slow');
    $('#text3').fadeOut('slow');
    $('#text1').fadeIn('slow');
    $("#arrow").animate({left:'40px'});
  });

  $('#ball2').click(function() {
    $('#text1').fadeOut('slow');
    $('#text3').fadeOut('slow');
    $('#text2').fadeIn('slow');
    $("#arrow").animate({left:'400px'});
  });

  $('#ball3').click(function() {
    $('#text2').fadeOut('slow');
    $('#text1').fadeOut('slow');
    $('#text3').fadeIn('slow');
    $("#arrow").animate({left:'770px'});
  });

});

Upvotes: 1

Related Questions