鼠标滑过改变图片

jQuery中attr()函数不支持delay函数控制延迟,把attr函数加在animate的回调函数中

jQuery(function(){

jQuery(‘.avia_image‘).hover(

function() {

urlss = jQuery(this).attr("src").replace("1.jpg","2.jpg");

jQuery(this).stop().animate({opacity: ‘0.3‘},100, function(){jQuery(this).attr("src",urlss);});

jQuery(this).delay(101).animate({opacity: ‘1‘},100);

},

function() {

urltt = jQuery(this).attr("src").replace("2.jpg","1.jpg");

jQuery(this).stop().animate({opacity: ‘0.3‘},100,function(){jQuery(this).attr("src",urltt);});

jQuery(this).delay(101).animate({opacity: ‘1‘},100);

});

}(jQuery));

时间: 2024-10-20 12:37:49

鼠标滑过改变图片的相关文章

[读码时间] 图片列表:鼠标移入/移出改变图片透明度

说明:代码来自网络.注释为笔者学习时添加. <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>图片列表:鼠标移入/移出改变图片透明度</title> <style> ul,li{ /*去除内外边距,去除列表默认样式*/ margin:0; padding:0; list-style-type:none; } #imgList{ /

函数传参,改变Div任意属性的值&amp;&amp;图片列表:鼠标移入/移出改变图片透明度

<!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-

CSS实现的鼠标滑过改变链接文字实例代码

CSS实现的鼠标滑过改变链接文字实例代码: 鼠标滑过的时候,有时候需要改变链接中的文本,这个如果使用js就比较好实现,当然使用CSS也并不难,下面就是一段这样的代码实例,下面就做一下介绍,希望对需要的朋友带来一定的帮助. 代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http

鼠标滑过显示图片大图效果

mnesia在频繁操作数据的过程可能会报错:** WARNING ** Mnesia is overloaded: {dump_log, write_threshold},可以看出,mnesia应该是过载了.这个警告在mnesia dump操作会发生这个问题,表类型为disc_only_copies .disc_copies都可能会发生. 如何重现这个问题,例子的场景是多个进程同时在不断地mnesia:dirty_write/2 mnesia过载分析 1.抛出警告是在mnesia 增加dump

jQuery实现的鼠标滑过切换图片代码实例

jQuery实现的鼠标滑过切换图片代码实例:有时候网页需要这样的简单效果,那就是当鼠标滑过默认图片的时候,能够实现图片的切换,可能在实际应用中,往往没有这么简单,不过大家可以自行扩展一下,下面简单介绍一下次效果.html静态代码如下: <body> <img src="images/mayi.jpg" /> </body> jquery切换代码: $(document).ready(function(){ var newImage=new Image

鼠标滑过列表图片放大,带列表序列号自动生成效果

请转载此文的朋友务必附带原文链接,谢谢. 原文链接:http://xuyran.blog.51cto.com/11641754/1861924 这里我只把关键代码给贴出来. html: <div class="hot-exchange">      <ul>      <li class="active clear">      <a href="">      <div class=&quo

jquery鼠标滑过展示图片时显示详情

jquery: 1 <script src="js/jquery.js" type="text/javascript"></script> 2 <script type="text/javascript"> 3 $(document).ready(function(){ //页面边加载边执行 4 $('.box').hover( 5 function(){ 6 $(this).find('img').anima

鼠标滑过、图片对应的文字高亮

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <style> li{ list-style: none; float: left; text-align: center; } </style> <body> <ul id="u">

鼠标滑过时显示图片内容隐藏和鼠标滑过图片隐藏内容显示的两种小方法

1.鼠标滑过时显示图片,内容隐藏,下面以一个小日历的做法展示 <div class="date7"> <a href=""><div class="date7a"><span class="abcabc">30</span></div></a> <a href=""><div class="dat