The code is working slowly
Hello any idea why my jQuery code works slowly in browser??
- <body style="background-color:gray">
- <div id="meniuCircle">
- <img id='meniu' src="MeniuVizual.png" style="height:500px" />
- <div id="opt1"> Optiune 1 </div>
- <div id="opt2"> Optiune 2 </div>
- </div>
- <div id="content">
- <img src="bug.jpg" /><img src="bumblebee.jpg" />
- </div>
- <script src="JavaScript1.js"></script>
- <script src="realshadow.js"></script>
- <script src="Shadow.js"></script>
- </body>
- var height = $(window).height();
- var $item = $('#content');
- var $meniu = $('#meniu');
- var $widget = $('#meniuCircle');
- var positionToMoveMenu = 200;
- var initialPosition = $('#meniuCircle').position().left;
- var img1 = $('#content img:eq(0)');
- var img2 = $('#content img:eq(1)');
- img1.hide();
- img2.hide();
- $('#meniu').css('height', height);
- //test = $meniu.position().top;
- //test1 = $meniu.height() / 2;
- //test3 = $item.height() / 2;
- //setare pozitie content in cazul nostru imagini
- $('#content img').each(function () {
- $(this).realshadow();
- });
- $('#content img').each(function () {
- $(this).css('top', $meniu.position().top + $meniu.innerHeight() / 2 - $(this).innerHeight() / 2);
- });
- //$('#meniu').realshadow();
- //setare pozitii optiuni in functie de imagine
- var pozitie = $('#meniu').position();
- LeftOpt1 = pozitie.left + $meniu.innerWidth() / 3;//a treia parte
- TopOpt1 = pozitie.top + $meniu.innerHeight() / 2 - $meniu.innerHeight() / 5 - $('#opt1 ').innerHeight();//a cincea parte
- LeftOpt2 = pozitie.left + $meniu.innerWidth() / 3;
- TopOpt2 = pozitie.top + $meniu.innerHeight() / 2 + $meniu.innerHeight() / 5;
- $('#meniu').show("explode", { pieces: 100 }, 1000).promise();
- $('#opt1 ').css({ 'left': -100, 'top': TopOpt1, 'font-size': $meniu.innerHeight() / 15 });
- $('#opt2 ').css({ 'left': -100, 'top': TopOpt2, 'font-size': $meniu.innerHeight() / 15 });
- $('#opt1 ').animate({ left: LeftOpt1 }, 2000).promise().done(addRealShadow);
- $('#opt2 ').animate({ left: LeftOpt2 }, 2000).promise().done(addRealShadow);
- function addRealShadow() {
- //$('#opt1 ').realshadow();
- //$('#opt2 ').realshadow();
- }
- var button1 = false;
- var button2 = false;
- $('#opt1 ').click(function () {
- if (button1 == false && button2 == false) {
- $widget.animate({ left: positionToMoveMenu }, 1000);
- img1.show("explode", { pieces: 100 }, 1000);
- button1 = true;
- button2 = false;
- } else if (button1 == true) {
- //se aduna inapoi meniul
- img1.hide("explode", { pieces: 100 }, 1000);
- $widget.animate({ left: initialPosition }, 1000);
- button1 = false;
- button2 = false;
- }
- else {
- //se afiseaza doar imaginea
- img1.show("explode", { pieces: 100 }, 1000);
- img2.hide();
- button1 = true;
- button2 = false;
- }
- });
- $('#opt2 ').click(function () {
- if (button2 == false && button1 == false) {
- $widget.animate({ left: positionToMoveMenu }, 1000);
- img2.show("explode", { pieces: 100 }, 1000);
- button2 = true;
- button1 = false;
- } else if (button2 == true) {
- //se aduna inapoi meniul
- img2.hide("explode", { pieces: 100 }, 1000);
- $widget.animate({ left: initialPosition }, 1000);
- button1 = false;
- button2 = false;
- }
- else {
- //se afiseaza doar imaginea
- img2.show("explode", { pieces: 100 }, 1000);
- img1.hide();
- button2 = true;
- button1 = false;
- }
- });