Jquery之渐变切换

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>fadeToggle</title>
<script language="javascript" src="../jQUery/jquery 1.10.2/jquery-1.10.2.min.js">
</script>
<script type="text/javascript">
    $(document).ready(function() {
        $("button").click(function(){
            $("#div1").fadeToggle();
            $("#div2").fadeToggle("slow");
            $("#div3").fadeToggle(3000);
            });
    });

</script>
</head>

<body>
<button>Button</button>
<div id="div1" style="width:80px; height:80px; background-color:#F00""></div>
<div id="div2" style="width:80px; height:80px;background-color:#00F"></div>
<div id="div3" style="width:80px; height:80px;background-color:#0FF"></div>
</boby>
</html>

run:

时间: 2024-10-13 00:58:13

Jquery之渐变切换的相关文章

基于jQuery图像碎片切换效果插件FragmentFly

基于jQuery图像碎片切换效果插件FragmentFly.这是一款只需三步轻松完成碎片动画,参数可调,使用方便. 在线预览   源码下载 部分代码: <div class="all_wrap"> <div class="wrap_head"> <div id="fragment_title"> </div> </div> <div class="wrap_middle&

基于jQuery左右滑动切换特效 附源码

分享一款基于脚jQuery左右滑动切换特效.这是一款鼠标点击左右箭头按钮图片滚动切换,鼠标移到图片上显示透明边框特效. 效果图如下: 废话不多说,代码奉上! html代码: 1 <div class="bodyCon08"><!--学员--> 2 <div class="students"> 3 4 <div id="four_flash"> 5 <div class="flashB

JQuery实现图片切换(自动切换+手动切换)

学习JS的时候本来积攒了很多有趣的小例子,但是苦于没有找到一些好的平台来展示这些JS效果.今天发现了RunJS这个分享代码的平台,迫不及待得想跟大家分享. 在浏览各大商城网站的时候,或者某些网站的首页,都会展示与本网站相关的一些实时切换的图片, 本文就给大家分享一个用jQuery实现图片自动切换的例子. 主页核心代码(Default.aspx): <!DOCTYPE html> <html> <head> <meta http-equiv="Conten

jquery ui动态切换主题的一种实现方式

这两天看coreservlets上的jQuery教程,虽然比较老了,不过讲得还是不错. 最后一部分讲jQuery ui 主题切换,用他介绍的方法实现不了.于是自己修改了下,可以了. 代码如下: html部分: <fieldset class="ui-widget"> <legend>Changing Themes (Skins) at Run Time</legend> <div class="ui-widget-content ui

基于jQuery左右滑动切换特效

分享一款基于脚jQuery左右滑动切换特效.这是一款鼠标点击左右箭头按钮图片滚动切换,鼠标移到图片上显示透明边框特效.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class="bodyCon08"><!--学员--> <div class="students"> <div id="four_flash"> <div class="flashBg&qu

18款 非常实用 jquery幻灯片图片切换

1.jquery图片滚动仿QQ商城带左右按钮控制焦点图片切换滚动 jquery图片特效制作仿腾讯QQ商城首页banner焦点图片轮播切换效果,带索引按钮控制和左右按钮控制图片切换. 查看演示>>          下载地址 2.jquery图片切换插件制作图片层叠缩放展示效果 jquery图片插件制作图片等比列缩放层叠样式,图片叠加展示.点击层叠最上层的图片依次点击缩放图片层叠缩放切换. 查看演示>> 下载地址 3.jquery图像幻灯片制作大小图片切换滚动展示 jquery图像幻

类似选项卡竖向排版的jquery图文同步切换效果

像TAB选项卡一样的图片切换效果,基于jquery来实现,试试这个图片切换有12345数字一起切换有小图大图一起切换里面有教程和源码,鼠标放上图片左侧的彩条上,右侧的大图片和左侧的文字说明一起切换. <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>类似选项卡竖向排版的jquery图文同步切换效果丨石家庄门禁</title> <style type="tex

jquery Tabs选项卡切换

效果: HTML部分: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jquery Tabs选项卡切换</title> </head> <body> <div class="country-profile"> <!--tabs--> &

Android:图片背景渐变切换与图层叠加的实现

本例要实现的目的: 1.图片背景渐变的切换,例如渐变的从红色切换成绿色. 2.代码中进行图层叠加,即把多个Drawable叠加在一起显示在一个组件之上. 效果图: 代码很简单: (1)布局文件: <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layo