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,设置动画的帧速率。

以上是本文的全部内容,希望本文的内容能给大家的学习或工作带来一定的帮助,同时也希望能给予更多的支持!