JavaScript Анимация

-1

Ниже приведен скриншот образец моего проекта ...JavaScript Анимация

желтые шарики держать мигает, пока вы не нажмете на нее, когда она нажата желтый шар становится синим и коробка тоже выскакивает с видео и несколькими изображениями ... Мне нужно добавить анимацию javaScript, когда шарик щелкнут, коробка должна скользить с красивой анимацией. Я много раз пробовал.

Помогите мне, ребята, пожалуйста.

Это CSS для коробки

#mainbox { 
    background-color:#084679; 
    height: 290px; 
    width: 497px; 
    position:absolute; 
} 
#videobox { 
    background-color:#084679; 
    height: 169px; 
    width: 300px; 
    left: 15px; 
    top: 19px; 
    float: left; 
    position: absolute; 
} 
#smallbox1 { 
    background-color: #0dd4d7; 
    height: 62px; 
    width: 110px; 
    left: 15px; 
    top: 211px; 
    float: left; 
    position: absolute; 
} 
#smallbox2 { 
    background-color: #0dd4d7; 
    height: 62px; 
    width: 110px; 
    left: 136px; 
    top: 211px; 
    float: left; 
    position: absolute; 
} 
#smallbox3 { 
    background-color:#0dd4d7; 
    height: 62px; 
    width: 110px; 
    left: 257px; 
    top: 211px; 
    float: left; 
    position: absolute; 
} 
#smallbox4 { 
    background-color:#0dd4d7; 
    height: 62px; 
    width: 110px; 
    left: 378px; 
    top: 211px; 
    float: left; 
    position: absolute; 
} 
#smallbox5 { 
    background-color: #084679; 
    height: 62px; 
    width: 110px; 
    left: 330px; 
    top: 60px; 
    float: left; 
    position: absolute; 
}

Это JavaScript

$('#c1').click(function() { 
       setPos(); 

       $('.circle').css('width', '60px'); 
       $('.circle').css('height', '60px'); 
       clearCircle() 


       $(this).removeClass("blink1"); 
       //$(this).addClass("blink1"); 
       //$(this).css('background-color', '#005aa8'); 
       $(this).css('width', '190px'); 
       $(this).css('height', '190px'); 

       $(this).css('top', 90 - ((190 - 60)/2)); 
       $(this).css('left', 120 - ((190 - 60)/2)); 

       $(this).css('background-image', 'URL(assets/images/blue_back.png)'); 

       $('#mainbox').hide(); 
       $('#mainbox1').hide(); 
       $('#mainbox1').css('top', '160px'); 
       $('#mainbox1').css('left', '165px'); 
       $('#mainbox1').css('z-index', ''); 
       $('#mainbox1').show(); 

      }) 

      $('#c2').click(function() { 
       setPos() 
       $('.circle').css('width', '60px'); 
       $('.circle').css('height', '60px'); 

       clearCircle() 


       $(this).removeClass("blink2"); 
       // $(this).addClass("blink2"); 
       //$(this).css('background-color', '#005aa8'); 
       $(this).css('width', '190px'); 
       $(this).css('height', '190px'); 
       $(this).css('top', 360 - ((190 - 60)/2)); 
       $(this).css('left', 665 - ((190 - 60)/2)); 
       $(this).css('background-image', 'URL(assets/images/1.png)'); 
       $('#mainbox1').hide(); 
       $('#mainbox').hide(); 
       $('#mainbox').css('top', '440px'); 
       $('#mainbox').css('left', '200px'); 
       $('#mainbox').css('z-index', ''); 
       $('#mainbox').show(); 

      }) 


      $('#c3').click(function() { 
       setPos() 
       $('.circle').css('width', '60px'); 
       $('.circle').css('height', '60px'); 

       clearCircle() 


       //$(this).css('background-color', '#005aa8'); 
       $(this).css('width', '190px'); 
       $(this).css('height', '190px'); 
       $(this).css('top', 721 - ((190 - 60)/2)); 
       $(this).css('left', 206 - ((190 - 60)/2)); 
       $(this).removeClass("blink3"); 
       // $(this).addClass("blink3"); 
       $(this).css('background-image', 'URL(assets/images/2.png)'); 

       $('#mainbox').hide(); 
       $('#mainbox1').hide(); 
       $('#mainbox1').css('top', '785px'); 
       $('#mainbox1').css('left', '265px'); 
       $('#mainbox1').css('z-index', ''); 
       $('#mainbox1').show(); 

      }) 


      $('#c4').click(function() { 
       setPos() 
       $('.circle').css('width', '60px'); 
       $('.circle').css('height', '60px'); 

       clearCircle() 

       $(this).css('z-index', '1'); 
       //$(this).css('background-color', '#005aa8'); 
       $(this).css('width', '190px'); 
       $(this).css('height', '190px'); 
       $(this).css('top', 500 - (
       (190 - 60)/2)); 
       $(this).css('left', 661 - ((190 - 60)/2)); 
       $(this).removeClass("blink4"); 
       //$(this).addClass("blink4"); 
       $(this).css('background-image', 'URL(assets/images/3.png)'); 

       $('#mainbox').hide(); 
       $('#mainbox1').hide(); 
       $('#mainbox1').css('top', '550px'); 
       $('#mainbox1').css('left', '738px'); 
       $('#mainbox1').css('z-index', ''); 
       $('#mainbox1').show(); 

      }) 


      $('#c5').click(function() { 
       setPos() 
       $('.circle').css('width', '60px'); 
       $('.circle').css('height', '60px'); 

       clearCircle() 


       //$(this).css('background-color', '#005aa8'); 
       $(this).css('width', '190px'); 
       $(this).css('height', '190px'); 
       $(this).css('top', 154 - ((190 - 60)/2)); 
       $(this).css('left', 1291 - ((190 - 60)/2)); 
       $(this).removeClass("blink5"); 
       //$(this).addClass("blink5"); 
       $(this).css('background-image', 'URL(assets/images/5.png)'); 

       $('#mainbox').hide(); 
       $('#mainbox1').hide(); 
       $('#mainbox').css('top', '223px'); 
       $('#mainbox').css('left', '820px'); 
       $('#mainbox').css('z-index', ''); 
       $('#mainbox').show(); 

      }) 


      $('#c6').click(function() { 
       setPos() 
       $('.circle').css('width', '60px'); 
       $('.circle').css('height', '60px'); 

       clearCircle() 


       //$(this).css('background-color', '#005aa8'); 
       $(this).css('width', '190px'); 
       $(this).css('height', '190px'); 
       $(this).css('top', 309 - ((190 - 60)/2)); 
       $(this).css('left', 1488 - ((190 - 60)/2)); 
       $(this).removeClass("blink6"); 
       // $(this).addClass("blink6"); 
       $(this).css('background-image', 'URL(assets/images/6.png)'); 

       $('#mainbox').hide(); 
       $('#mainbox1').hide(); 
       $('#mainbox').css('top', '390px'); 
       $('#mainbox').css('left', '1025px'); 
       $('#mainbox').css('z-index', ''); 
       $('#mainbox').show(); 

      }) 


      $('#c7').click(function() { 
       setPos() 
       $('.circle').css('width', '60px'); 
       $('.circle').css('height', '60px'); 

       clearCircle() 


       //$(this).css('background-color','#005aa8'); 
       $(this).css('width', '190px'); 
       $(this).css('height', '190px'); 
       $(this).css('top', 608 - ((190 - 60)/2)); 
       $(this).css('left', 1488 - ((190 - 60)/2)); 
       $(this).removeClass("blink7"); 
       // $(this).addClass("blink7"); 
       $(this).css('background-image', 'URL(assets/images/7.png)'); 

       $('#mainbox').hide(); 
       $('#mainbox1').hide(); 
       $('#mainbox').css('top', '680px'); 
       $('#mainbox').css('left', '1025px'); 
       $('#mainbox').css('z-index', ''); 
       $('#mainbox').show(); 

      }) 

      $('#c8').click(function() { 
       setPos() 
       $('.circle').css('width', '60px'); 
       $('.circle').css('height', '60px'); 

       clearCircle() 


       //$(this).css('background-color', '#005aa8'); 
       $(this).css('width', '190px'); 
       $(this).css('height', '190px'); 
       $(this).css('top', 711 - ((190 - 60)/2)); 
       $(this).css('left', 1635 - ((190 - 60)/2)); 
       $(this).removeClass("blink8"); 
       // $(this).addClass("blink8"); 
       $(this).css('background-image', 'URL(assets/images/8.png)'); 

       $('#mainbox').show(); 
       $('#mainbox1').hide(); 
       $('#mainbox').css('top', '785px'); 
       $('#mainbox').css('left', '1170px'); 
       $('#mainbox').css('z-index', ''); 
       $('#mainbox').show(); 

      }) 

     }) 

     function clearCircle() { 

      $('.circle').css('background-image', ''); 
     } 

     function ResetCircle() { 
      $('.circle').css('width', '60px'); 
      $('.circle').css('height', '60px'); 
     } 

     //<!-- Postion tags--> 

     function clearCircle() { 

      $('.circle').css('background-image', ''); 
     } 

     function setPos() { 

      if ($('#c1').width() == 190) { 
       $('#c1').css('top', 90); 
       $('#c1').css('left', 120); 
       $('#c1').addClass("blink1"); 
      } 
      if ($('#c2').width() == 190) { 
       $('#c2').css('top', 360); 
       $('#c2').css('left', 665); 
       $('#c2').addClass("blink2"); 
      } 

      if ($('#c3').width() == 190) { 
       $('#c3').css('top', 721); 
       $('#c3').css('left', 206); 
       $('#c3').addClass("blink3"); 
      } 

      if ($('#c4').width() == 190) { 
       $('#c4').css('top', 500); 
       $('#c4').css('left', 661); 
       $('#c4').addClass("blink4"); 
      } 

      if ($('#c5').width() == 190) { 
       $('#c5').css('top', 154); 
       $('#c5').css('left', 1291); 
       $('#c5').addClass("blink5"); 
      } 

      if ($('#c6').width() == 190) { 
       $('#c6').css('top', 309); 
       $('#c6').css('left', 1488); 
       $('#c6').addClass("blink6"); 

      } 

      if ($('#c7').width() == 190) { 
       $('#c7').css('top', 608); 
       $('#c7').css('left', 1420); 
       $('#c7').addClass("blink7"); 
      } 

      if ($('#c8').width() == 190) { 
       $('#c8').css('top', 711); 
       $('#c8').css('left', 1635); 
       $('#c8').addClass("blink8"); 
      } 
     }

источник

2013-08-18 Drek John

* "я пробовал много раз не повезло" * *** Как ***, точно? И что он сделал вместо того, что вы ожидали от этого? –

Когда я нажимаю на круг, ящик должен анимировать и входить! –

Pls dont downrate guys! Я wnt могу получить любую помощь в будущем :( –

лучший и простой JQuery анимации или эффект JQuery UI здесь вы найдете примеры и .js файлы

http://jqueryui.com/effect/

источник

2013-08-18 18:32:24

Если вы хотите анимацию, а не только позиционирование, а затем использовать .animate() вместо .css(), как это:

function AnimatePosition(TheSelector, SomeTopValue, SomeLeftValue. SomeWidthValue, SomeHeightValue) { 

    TheSelector.animate({ top: SomeTopValue, 
          left: SomeLeftValue 
          width: SomeWidthValue, 
          height: SomeHeightValue}, 500); 
}

а затем использовать его, так как вы, кажется, делают этот тип изменений много, вы называете это LKE это, используя кэширование селектора:

TheSelector = $(this); //or TheSelector = $('#mainbox1'); or another element 
TheTop = 721 - ((190 - 60)/2); 
TheLeft = 206 - ((190 - 60)/2); 
TheHeight = 190; 
TheWidth = 190; 

AnimatePosition(TheSelector, TheTop, TheLeft, TheWidth, TheHeight);

Просто предположение, что может помочь: цепь и кэшировать селекторы!

Когда вы пишете что-то вроде этого:

$('#mainbox').hide(); 
$('#mainbox').css('top', '440px'); 
$('#mainbox').css('left', '200px'); 
$('#mainbox').css('z-index', ''); 
$('#mainbox').show();

вы можете написать это:

var mainbox = $('#mainbox'); или var This = $(this);, так что вы не должны переоценивать $('#mainbox') или $(this) каждой строки. В самом деле, в вашем случае, вы должны использовать цепочки и писать (обратите внимание, что .css() может также принять объект):

$('#mainbox').hide() 
      .css({'top': '440px', 'left': '200px', 'z-index': '' }) 
      .show();

источник

2013-08-18 16:11:25 frenchie

Вы случайно оставили точки с запятой в конце каждой строки внутри вашей цепочки. – Sparky

@Sparky: Да, я сделал; просто исправил его, спасибо. – frenchie

JavaScript Анимация

ответ

Смежные вопросы