资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划,从策略到执行的一站式服务

jquery淡入淡出,jquery淡入淡出文字

我想要的效果怎么用 Jquery 中 fadeIn() 和fadeOut() 实现鼠标移上去和移出来有一个淡入淡出的效果?

代码没有问题,是你的使用有问题:

网站建设哪家好,找创新互联公司!专注于网页设计、网站建设、微信开发、微信小程序开发、集团企业网站建设等服务项目。为回馈新老客户创新互联还提供了工农免费建站欢迎大家使用!

fadeOut的意思是把元素透明直到透明度为0%的时候将元素display:none;

所以效果是完全正常的。

你要的效果应该是用fadeTo来实现,表示透明到指定的透明度就停止。

jquery淡入淡出的slow是多久

animate slow的时间是600ms

官方文档的解释是:

Duration

Durations are given in milliseconds; higher values indicate slower animations, not faster ones. The default duration is 400milliseconds. The strings 'fast' and 'slow' can be supplied to indicate durations of 200 and 600 milliseconds, respectively.

引自:

jQuery的fadeIn 和 fadeOut与与hover有什么区别?

首选 fadeIn fadeOut 是淡入,淡出事件, 你可以用任何你想的方式来触发,比如单击元素, 双击元素, 悬停元素等等

hover(function1,function2) 一个模仿悬停事件(鼠标移动到一个对象上面及移出这个对象)的方法。 它已经预定义了触发操作为鼠标悬停(当然代码触发是另一回事)

其次 fadeIn fadeOut 已经预定义了触发事件后,元素的效果为淡入,淡出,

hover 没有规定,也就是说我们可以在 function1,function2(分别为鼠标悬停和鼠标离开事件) 事件中,做任何想做的事情,当然包括淡入淡出 效果

javascript 图片在指定位置淡入淡出

利用闭包实现就可以了..

//settimeout

script

window.onload=function(){

document.getElementById('test').onmouseover=show;

document.getElementById('test').onmouseout=hide;

}

function setOpacity(elem,num){

if(elem.filters){

return elem.style.filter='alpha(opacity='+num+')';

}else{

return elem.style.opacity=parseFloat(num/100);

}

}

function show(){

var $this=this;

for( var i=0;i=100;i++){

(function(){

//catch i;

var p=i;

setTimeout(function(){

setOpacity($this,p);

},p*2);

})();

}

}

function hide(){

var $this=this;

for(var i=100;i=0;i--){

(function(){

//catch i;

var p=i;

setTimeout(function(){

setOpacity($this,100-p);

},p/2);

})();

}

}

/script

style

#test{

width:200px;

height:200px;

background:#ff0099;

*filter:alpha(opacity=0);

opacity:0;

}

/style

body

div id='test'/div

/body

//其实这个问题我很久之前有做过...实现淡入的方法很简单...但是淡出..不知道为什么..用同样的方法总是不行...

其实一楼说的jquery很容易实现..我早上也查了一下jquery 原码..当时是查的hide和show..不过它是通过其他的函数来实现的.fade倒是没有找到....今天看到你的问题我重新做了一次...还是那个问题...后来用变量跟踪发现...hide函数i被捕获后..p确实=i.但是进入setTimeout函数后.它就会变成100-P....所以hide函数我给他改成了100-p....但是具体的原因我也很郁闷...

后来用interval的方法来实现....就不存在这个问题了...

//setinterval

var i=0;

var showID;

var hideID;

window.onload=function(){

document.getElementById('test').onmouseover=show;

document.getElementById('test').onmouseout=hide;

}

function setOpacity(elem,num){

if(elem.filters){

return elem.style.filter='alpha(opacity='+num+')';

}else{

return elem.style.opacity=parseFloat(num/100);

}

}

function show(){

var $this=this;

showID=setInterval(function(){

if(i100){

setOpacity($this,i);

i+=5;

}else{

clearInterval(showID);

}

},10);

}

function hide(){

var $this=this;

hideID=setInterval(function(){

if(i=0){

setOpacity($this,i);

i-=5;

}else{

clearInterval(hideID);

}

},10);

}

希望能帮到你

怎样用JavaScript制作淡入淡出的文字效果

1、用jquery的话,fadeIn ,fadeOut , fadeToggle

2、配合css3,用animation或transform变化 opacity 在 0~1间变换就行

3、用setTimeout或requestAnimationFrame 变换 opacity

jQuery里面隐藏和显示效果怎么写?

1、jquery.show()和jquery.hide()方法

语法:

$(selector).show(speed,callback);

$(selector).hide(speed,callback);

2、jquery.toggle()方法

语法:

$(selector).toggle(speed,callback);

3、带有淡入淡出效果的显示和隐藏

$(selector).fadeIn(speed,callback)

$(selector).fadeOut(speed,callback)

$(selector).fadeToggle(speed,callback)

$(selector).fadeTo(speed,opacity,callback)

4、带有滑动效果的显示和隐藏

$(selector).slideDown(speed,callback)

$(selector).slideUp(speed,callback)

$(selector).slideToggle(speed,callback)

注意:

可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。

可选的 callback 参数是滑动完成后所执行的函数名称。


当前题目:jquery淡入淡出,jquery淡入淡出文字
本文来源:http://cdkjz.cn/article/dsghcdc.html
多年建站经验

多一份参考,总有益处

联系快上网,免费获得专属《策划方案》及报价

咨询相关问题或预约面谈,可以通过以下方式与我们联系

大客户专线   成都:13518219792   座机:028-86922220