Jquery的UI简单方便
下面实现了层的淡入淡出和半透明
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
<title>JQuery淡入淡出效果</title>
<script type='text/javascript' src="jquery/jquery-1.3.1.js"></script>
<script type="text/javascript">
function fadeIn(){
$("#popup").fadeIn(3000);
$("#popup").css("position","absolute");
$("#popup").css("left","300px");
$("#popup").css("top","400px");
}
function fadeOut(){
$("#popup").fadeOut(2000);
}
function fadeTo(){
$("#popup").fadeTo(3000,0.5);
}
</script>
<body>
<input type="button" value="弹出层" onclick="fadeIn()" >
<div id="popup" style="width:200px;height:200px;border:1px red solid;display:none;background-color:red;">
弹出层的试验
<br>
<input type="button" value="取消" onclick="fadeOut()" >
<input type="button" value="半透明" onclick="fadeTo()" >
</div>
</body>
</html>
commentmeta() {
var x = $(".commentmeta");//.commentmeta就是我想要隐藏的操作信息的类名
var y = $("#commentlist li");//#commentlist是评论列表的id名
x.hide();//隐藏操作条
y.hover(function() {
$(this).find(".commentmeta").fadeIn(200);//括号内的数值表示淡入的时间,可以自己修改
},function() {
$(this).find(".commentmeta").fadeOut(400);//括号内的数值表示淡出的时间,可以自己修改
});
};
commentmeta();
分享到:
相关推荐
用fadeIn、fadeOut、fadeToggle来实现淡入淡出。
本文所述的“基于jQuery实现淡入淡出效果轮播图”就是利用jQuery提供的动画方法来实现图片轮播功能的一种实践。 实现轮播图的核心在于对图片的显示和隐藏操作,以及在适当的时机切换图片。jQuery的`fadeIn()`和`...
例如,jQuery的`.fadeIn()`和`.fadeOut()`方法可以轻松实现淡入淡出效果。 7. **响应式设计** 当前的轮播图可能还考虑了响应式设计,以适应不同设备和屏幕尺寸。通过使用媒体查询(Media Queries)和百分比布局,...
《jQuery左右淡入淡出切换幻灯片:打造高效轻量级网页动态效果》 在网页设计中,焦点图和幻灯片是不可或缺的元素,它们能够吸引用户的注意力,展示重要信息,提升用户体验。今天我们将深入探讨一款名为“jQuery左右...
本示例中的"jquery图片淡入淡出切换特效.zip"是一个基于jQuery实现的图片轮播效果,它为网页设计提供了一种吸引用户的动态视觉体验。这种特效通常用于网站的图片展示,如产品相册、幻灯片或背景轮播等场景。 jQuery...
本教程将详细讲解如何利用jQuery实现窗体的淡入淡出效果,以及如何使div层随鼠标移动,适用于创建动态且吸引人的商品信息展示。 首先,你需要在HTML文件中引入jQuery库。这通常通过CDN链接或者本地文件来完成。例如...
"JQuery淡入淡出自动切换图片特效"就是一种常见的实现方式,它利用jQuery库的动画功能,使图片在页面上以淡入淡出的方式自动切换,既美观又具有交互性。接下来,我们将深入探讨这个知识点。 首先,jQuery是一个轻量...
本篇文章将详细讲解基于jQuery实现的超炫淡入淡出效果、DIV渐变居中弹出框插件的原理与应用。 首先,"jQuery超炫淡入淡出效果"是指利用jQuery提供的fadeIn()和fadeOut()方法,实现元素的平滑透明度变化,从而达到...
通常,这种类型的文件可能包含HTML、CSS和JavaScript文件,用于演示和学习jQuery淡入淡出幻灯片的实现。用户可以通过解压文件,查看并运行这些代码来理解和实践这个特效。 总结: jQuery实用淡入淡出幻灯片是一个...
首先,淡入淡出效果是通过jQuery的动画功能实现的,主要涉及到`fadeIn()`和`fadeOut()`两个方法。`fadeIn()`方法可以使元素逐渐变得可见,而`fadeOut()`则使其逐渐不可见。这两个方法都接受速度参数,例如`slow`、`...
本教程将深入讲解如何使用jQuery来实现一个左右淡入淡出滑动的效果,这种效果通常用于创建引人注目的提示信息或者新闻滚动展示。 首先,我们需要在HTML页面中引入jQuery库。如果还没有引入,可以通过以下方式添加...
标题"基于jQuery实现淡入淡出的带文字标题图片切换焦点图特效源码.zip"表明这是一个使用jQuery库开发的图片切换效果,具有淡入淡出的过渡动画,并且在切换过程中会展示文字标题。这种类型的焦点图通常用于网站设计中...
jQuery点击淡入淡出显示图片特效是Web开发中一种常见的交互设计,主要利用JavaScript库jQuery和CSS3技术来实现。这种特效在网站中被广泛应用于图片展示、相册浏览等功能,给用户带来流畅且视觉吸引的体验。接下来,...
《jQuery淡入淡出瀑布流效果的实现与应用》 在网页设计中,动态效果的运用可以极大地提升用户体验,使得网站或应用更具吸引力。其中,jQuery的淡入淡出瀑布流效果是一种常见的视觉表现手法,它结合了瀑布流布局的...
在本文中,我们将深入探讨窗口淡入淡出效果的实现原理、常用技术和编程语言的实现方法。 首先,淡入淡出效果的核心在于控制窗口的Alpha通道,Alpha通道决定了颜色的透明度。在全透明(Alpha值为0)时,窗口完全不...
jQuery 是一个轻量级的 JavaScript 库,提供了丰富的功能,包括动画效果,使得实现淡入淡出轮播图变得简单。以下将详细解析如何使用 jQuery 来实现这个功能。 首先,HTML 结构是轮播图的基础。在给定的代码中,我们...
总的来说,"Jquery淡入淡出幻灯片特效图片切换"源码是利用jQuery的动画特性,结合定时器实现的一种常见网页动态效果。这种效果不仅美观,还能提升网站的吸引力和用户体验。学习和理解这种代码,对于提升前端开发技能...
在本案例中,jQuery是实现文字淡入淡出效果的基础,通过其强大的API和丰富的插件生态系统,开发者可以轻松地添加复杂的动态效果到网页中。 reveal-it.js插件则是这个特效的核心。它专门设计用来让文字以平滑的淡入...
使用jQuery的fadeIn()和fadeOut()方法实现图片的淡入淡出效果。在`$(document).ready()`函数中,初始化轮播,然后设置定时器进行周期性切换。例如: ```javascript $(document).ready(function(){ var slide...