jQuery操作效果的详细解释

jQuery操作效果的详细解释
效果操作分为五类:1。基本,2。幻灯片,3。淡入淡出,4。习俗,5。设置
显示()(),隐藏(),切换()

代码如下:

HTML代码:
你好
jQuery代码:

$(p);

启动p是隐藏的,执行行代码,p显示

$(p)。隐藏();

显示当前p标记,并在执行该行后隐藏代码p。
$(# BTN1)。Click(function(){)
$(p)。Toggle();
})
将一个点击事件绑定到按钮,让它在P是现实的时候隐藏,如果P隐藏,让它显示。

注释:显示(),显示隐藏的匹配元素。

隐藏(),隐藏显示的元素。

触发器(),用于绑定两个或多个事件处理函数,以响应单击事件中选定元素的旋转。

SlideDown()(),(),()slidetoggle slideup

代码如下:

HTML代码:
jQuery代码:
$(# BTN1)。Click(function(){)
$(div)。SlideDown();
});
单击事件势必对BTN1 ID按钮,当扩展按钮被单击时,DIV向下展开。

$(# BTN2)。Click(function(){)
$(div)。SlideUp();
});
单击事件势必对BTN2 ID按钮,当扩展按钮被单击时,DIV的合同了。

$(# BTN3)。Click(function(){)
$(div)。SlideToggle();
});
绑定click事件对BTN3 ID按钮,收缩时,DIV向下,反之亦然。

Note: slideDown (), unfold down.

SlideUp(),向上收缩。

SlideToggle(),通过一个高度变化的所有匹配元素的可见性。

结果如下:
FadeIn()()(),淡出,褪变成了(),fadeToggle()

代码如下:

HTML代码:

jQuery代码:
$()弗斯特()Click(函数(){)
$(div)。FadeIn(1000);
});
选择带选择器的第一个输入,将其绑定到单击事件,div开始隐藏,它会在一秒钟内慢慢显示,并实现淡入淡出效果。
$(输入)。EQ(1)。Click(函数(){)
$(div)。停止()FadeOut(1000);
/ / $(div)。FadeOut(1000);
});
用选择器选择第二个输入,将其绑定到单击事件,div现在显示出来,它会慢慢隐藏在第二个淡入淡出。
$(输入)。EQ(2)。Click(函数(){)
$(div)。停止()FadeToggle(1000);
})
选择带选择器的第三输入,将单击事件绑定到它,并在div显示时让它淡入,否则,当div隐藏时,让它淡入。
$(输入)。EQ(3)。Click(函数(){)
$(div)。停止()FadeTo(1000,0.5);
})
用选择器选择第四个输入,将其绑定到单击事件,并设置淡入淡出的时间和透明度(淡出)。

注释:()时,所有匹配元素的淡入淡出效果通过不透明度的变化实现。

FadeOut(),所有匹配元素的淡入淡出效果的不透明度的变化来实现的。

FadeTo(),调整所有匹配元素的不透明度到指定的不透明度。

FadeToggle(),开关所有褪色,影响所有匹配的元素通过不透明度的变化。

结果如下:
动画()()、停止()、延迟()

代码如下:

CSS代码:
div {
宽度:100px;
身高:100px;
背景:红色;
}
HTML代码:
圣曲泽

jQuery代码:
$(# BTN1)。Click(function(){)
$(),Delay(2000)。
宽度:300px
高度:300px
字体大小:4em
},5000,函数(){()
console.log(动画完成)
})
});
绑定单击事件ID为BTN1按钮,当按钮被点击时,延迟是两秒,和DIV的宽度、高度、字体大小将

逐渐成为这些值的集合,在动画完成后两秒钟完成。
$(# BTN2)。Click(function(){)
$();
})
绑定click事件对BTN2 ID按钮,当div是动画,点击按钮和动画将停止。

注释:动画(),用于创建自定义动画的函数。

停止(),停止在指定元素上运行的所有动画。

Delay(),设置延迟以推迟队列中后期项目的执行。

结果如下:
JQuery.fx.off,jquery.fx.interval

jquery.fx.off,关闭所有页面上的动画。

JQuery.fx.interval,设置动画的帧速率。

以上是本文的全部内容,希望本文的内容能给大家的学习工作带来一定的帮助,同时也希望能给予更多的支持
免责声明:本网信息来自于互联网,目的在于传递更多信息,并不代表本网赞同其观点。其原创性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺,并请自行核实相关内容。本站不承担此类作品侵权行为的直接责任及连带责任。如若本网有任何内容侵犯您的权益,请及时联系我们,本站将会在24小时内处理完毕。
相关文章
返回顶部