使用animate()完成修改图片src切换图片的动画效果

如下所示，在动画效果中的回调函数中进行src的修改和动画的切换

$(".TopImg").animate(
　　{opacity:‘toggle‘},
　　"slow",
　　null,
　　function(){
　　　　$(".TopImg").attr("src","../images/2.jpg");
　　　　$(".TopImg").animate({opacity:‘toggle‘},"slow");
　　}
);

时间： 2024-08-01 14:31:44

使用animate()完成修改图片src切换图片的动画效果的相关文章

图片来回切换的新闻展示效果

和大家分享一个从新浪网里抠出来的图片切换展示的特效.从新浪网里抠出来的一个图片切换轮播展示效果,使用起来非常简单的. 第一步:把flash框架下载保存到自己的网站里: http://www.aijquery.cn/html/aijquery/inc/flashimg.swf 第二步:定义要展示的图片,及相关的标题.简介等信息: //定义大图的路径, var bigPic0 ="1.jpg"; var bigPic1 ="2.jpg"; var bigPic2 =3.

万彩动画大师丨如何给图片添加上升气泡的动画效果

给图片文字添加上升气泡的动画效果,可以给观众带来一种梦幻般的视觉感受. 在[时间轴区域]中点击[+],会弹出一个小窗体,接着在窗体的[搜索框]中输入动画效果[气泡]的首字母[qp]并搜索,接着会看到有[气泡]的动画效果,选择并点击[上升气泡]的动画效果,然后点击[确定],就可以实现给图片添加气泡上升的强调动画效果,如下图所示: 原文地址:https://www.cnblogs.com/focusky/p/10213282.html

css 鼠标经过图片缓慢切换图片、鼠标离开缓慢还原

.header .logo { width: 54px; height: 54px; margin:23px 0; text-align: center; border-radius: 54px; background: url("/static/images/icon/logo.png"); border: #e38d13 solid; transition: all 0.6s; } /* logo 水平反转 */ .header .logo:hover { background-p

01-实现图片按钮的缩放、动画效果（block的初步应用）

1 #import "ViewController.h" 2 3 #define kDelta 60 4 5 @interface ViewController () 6 7 @end 8 9 @implementation ViewController 10 11 #pragma mark 封装动画效果的代码 12 - (void)btnClickWithBlock:(void (^)())block 13 { 14 // 实现动画(渐进变化) 15 [UIView beginAni

android中NavigationDrawer的使用以及添加drawer切换时的动画效果

最近在开发app的时候需要用到NavigationDrawer,但是在添加动画(汉堡图标和箭头图标互转)效果的时候老是出现问题,折腾了好几个小时终于搞定.在这里跟大家分享一下.说明下,我开发时候用的minSdkVersion 是9,也就是本文所说的方法适用于APIlevel 2.3以上的情况,但若minsdk比较高的话会有略微的差异. 1.效果及依赖 NavigationDrawer是Material Design中推崇的一种控件,网易新闻.知乎都有在使用,先上效果图: 图中开启.关闭Navig

给Activity切换过程添加动画效果

首先,在资源文件中定义一些动画效果例如: <scale android:duration="@android:integer/config_mediumAnimTime" android:fromXScale="1.0" android:fromYScale="1.0" android:pivotX="50%p" android:pivotY="50%p" android:toXScale=&quo

HTML5移动端图片左右切换动画

插件描述:HTML5移动端图片左右切换动画小海今天要给大家分享一款很不错的图片左右切换焦点图动画,并且支持移动端触摸滑动.功能上,这款HTML5图片播放器支持鼠标滑动.手机端触摸滑动以及自动播放.外观上,这款HTML5图片切换动画的两侧有淡化处理,因此更显立体效果. 找html5教程开发,canvas开发,jquary特效的朋友来涂志海个人博客网,这里有你想要的一切(万一没有的,请联系涂志海,再解决,嘿嘿)同样的,这里静态图片完全体现不出来这个插件的效果,大家可以点击演示地址看看. 下载演

ImageSwitcher实现显示图片（更改图片时有动画效果）

ImageView和ImageSwitcher都是用来显示图片的.只不过后者在更新显示的图片的时候可以有动画效果. 注意点: 1.ImageSwitcher初始化需要定义一个ViewFactory,该ViewFactory生成的对象必须为ImageView. iSwitcher.setFactory(new ViewFactory() { @Override public View makeView() { //创建一个ImageView对象 ImageView imageView = new

CSS--使用Animate.css制作动画效果

一使用Animate.css动画 // 通过@import引入外部CSS资源; // 引入线上图片及JS文件; // 通过更改CSS类名生成不同类型的CSS3动画; 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="utf-8"> 5 </head> 6 <style> 7 /* Animate.css GitHu