jquery Basic Animation effect

jquery Basic animation effect 1, show ()

The Hide () test case that is used to display the corresponding page element:

<p title="标题">测试</p><ul style="display: none">    <li title=‘苹果‘>苹果</li>    <li title=‘橘子‘>橘子</li>    <li title=‘菠萝‘>菠萝</li></ul>点击显示$(‘p‘).bind("click",function(){    $("ul").show();})点击切换效果$(‘p‘).toggle(function(){    $("ul").show();},function(){    $("ul").hide()})

Note: It is possible to add parameters in this

Speed: A string of three predetermined speeds ("slow", "normal", or "fast") or a millisecond value that represents the duration of the animation (for example: 1000)

Note the use of toggle () here

$(‘#test‘).click(function(){    $("ul").toggle();})————————————————slideDown$(‘p‘).toggle(function(){    $("ul").slideUp()},function(){    $("ul").slideDown();})

Note here that the This keyword, yesterday we have tested can not be used, because this is a JS thing, but can not be converted to jquery things

Demo Code:

$(‘#test‘).toggle(function(){    $(this).next().slideUp() ----注意这里和上边的写法不同之处},function(){    $(this).next().slideDown();})注意的和之前的隐藏显示一样，这里也有简化版$(‘#test‘).click(function(){    $("ul").slideToggle()})——————————————fadeIn    fadeOut---淡入淡出效果$(‘#test‘).toggle(function(){    $(this).next().fadeOut();},function(){    $(this).next().fadeIn();})

Note: Look at the API here also has its own concise wording, the use of a lot of attention to animate ()

--feel dissatisfied with the previous animation, okay, let's see here, custom animation effects

Custom Mobile Cases:

<div id="test"></div>   #test{            position: absolute;            width: 100px;            height: 100px;            border: 1px solid red;            background-color: gray;        }$(‘#test‘).click(function(){    $(this).animate({left:"500px"},3000)})

Note: Here you can add multiple conditions to the

$(‘#test‘).click(function(){    $(this).animate({left:"200px",height:"200px"},3000)})

Case 2:

<button id="left">?</button> <button id="right">?</button><div id="test"></div>$(‘#left‘).click(function(){    $("#test").animate({left:"-500px"},3000)})$(‘#right‘).click(function(){    $("#test").animate({left:"500px"},3000)})

jquery Basic Animation effect