JavaScript动画

Question

下面是我的项目的样本屏幕截图...

黄色球继续闪烁，直到你点击它，当它被点击黄色球变成蓝色和一个盒子太持久性有机污染物用视频和少量图片...我需要添加一个javaScript动画，当点击球时，该框应该滑动到一个美丽的动画。我尝试了很多次，没有运气。

请帮我一把。

这是盒子

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

Answer 1

最好和最简单的jQuery动画或效果是jQuery UI的 在这里你会找到的例子和.js文件

http://jqueryui.com/effect/

Answer 2

如果你想要的动画，而不是仅仅定位CSS，然后使用.animate()代替.css()，就像这样：

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

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

然后使用它，因为你似乎在做这种类型的变化很多，你怎么称呼它艾克这一点，使用选择缓存：

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