Question

寻找一些学习JQuery的好教程。我想学习网站中使用的动画，请给我一些建议。谢谢！

我的基本问题是他们说使用JS的一些网站上的动画，有些人说他们说JQ

Answer 1

JQuery是一个Javascript库，简化了Web开发人员的一些任务。例如，如果您想通过其ID使用

访问Javascript中的元素，则可以访问

var myelement = document.getElementById(myelementID)

JQuery中的简化版本将是

var myelement= $('#myelementID');

如果您喜欢通过练习来学习，我会建议代码学院的学习路径：https://www.codecademy.com/learn/jquery 否则你可以咨询https://learn.jquery.com/。关于动画，我强烈推荐使用animate.css库：https://daneden.github.io/animate.css用它来动画html组件非常容易（你只需要将动画类添加到组件类属性中），很酷的是你可以这样做是为了使用JQuery动态添加动画（例如，当您单击按钮或用户向下滚动时）

Answer 2

我在下面提供了一些相当基本的注释代码，改编自W3schools示例。尝试理解它，尝试改变它，使其从左向右移动，而不仅仅是宽度和高度，你将得到它。

＆＃13;

 function animate() {
     //jQuery selector: select all div elements into var 'div',
     //it then becomes a container of this collection with a
     //number of methods to manipulate it
     //see https://www.w3schools.com/jquery/jquery_selectors.asp
     var div = $("div"); 
        
     startAnimation(); // hoisting, see below
        
     function startAnimation(){
        //animate until height is 100
        div.animate({height: 100}, "slow");
        //then animate until width is 100
        div.animate({width: 100}, "slow");
        //then animate until height is 50 
        div.animate({height: 50}, "slow");
        //then animate until width is 50 and call itself after
        div.animate({width: 50}, "slow", startAnimation);
     }
}
animate();

＆＃13;

.box-a {
  left:10px;top:50px;
  width:50px;
  height:50px;
  position:absolute;
  background: gray;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="box-a"></div>

＆＃13;

什么是Jquery以及如何为网站制作动画

2 个答案: