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

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

$(".TopImg").animate(
  {opacity:‘toggle‘},
  "slow",
  null,
  function(){
    $(".TopImg").attr("src","../images/2.jpg");
    $(".TopImg").animate({opacity:‘toggle‘},"slow");
  }
);
时间: 2024-10-07 10:50:09

使用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