正文
jquery淡入淡出,jquery淡入淡出文字
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
我想要的效果怎么用 Jquery 中 fadeIn() 和fadeOut() 实现鼠标移上去和移出来有一个淡入淡出的效果？
代码没有问题，是你的使用有问题：
fadeOut的意思是把元素透明直到透明度为0%的时候将元素display:none;
所以效果是完全正常的。
你要的效果应该是用fadeTo来实现，表示透明到指定的透明度就停止。
相关问答
Q1: 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.
引自:
Q2: jQuery的fadeIn 和 fadeOut与与hover有什么区别？
首选 fadeIn fadeOut 是淡入,淡出事件, 你可以用任何你想的方式来触发,比如单击元素, 双击元素, 悬停元素等等
hover(function1,function2) 一个模仿悬停事件（鼠标移动到一个对象上面及移出这个对象）的方法。 它已经预定义了触发操作为鼠标悬停(当然代码触发是另一回事)
其次 fadeIn fadeOut 已经预定义了触发事件后,元素的效果为淡入,淡出,
hover 没有规定,也就是说我们可以在 function1,function2(分别为鼠标悬停和鼠标离开事件) 事件中,做任何想做的事情,当然包括淡入淡出 效果
Q3: 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);
}
希望能帮到你
Q4: 怎样用JavaScript制作淡入淡出的文字效果
1、用jquery的话，fadeIn ，fadeOut , fadeToggle
2、配合css3,用animation或transform变化 opacity 在 0~1间变换就行
3、用setTimeout或requestAnimationFrame 变换 opacity
Q5: 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 参数是滑动完成后所执行的函数名称。
