$(function() {
$("#logo").append("");
//When the ID is logo Insert a span with hover style inside the tag
$('.hover').css('opacity', 0);
//Set the transparency of hover to 0
$('.hover ').parent().hover(
function() {
$('.hover').stop().animate({opacity: '1'},750);
},
function() {
$('.hover').stop().animate({ opacity: '0'},750);
});
//This is a JQ Commonly used hover() effect. When the mouse is placed on the parent element
// with class hover. Stop all animations on the current label and perform subsequent custom effects? The transparency of the hover gradually changes from 0 to 100%. ; Vice versa when the mouse leaves 3749328/how-to-fix-opacity-on-ie6
http://stackoverflow.com/questions/3749328/how-to-fix-opacity-on-ie6
What, I don’t Can speak EnglishThat What, I don’t know English
No... you can use fadein()..fadeout()..
Quote from 1st floor’s reply :
http://stackoverflow.com/questions/3749328/how-to-fix-opacity-on-ie6
What, I don’t know English
No Well... you can use fadein()..fadeout()..
What I want to do is a gradient button. I used fadein() to do it, but the effect was very bad. Now I am satisfied with the effect. But IE6 is not compatible. I want to find out what the problem is.
opacity: '1', it seems like it can't be fixed. Use IE's filter
opacity: '1', it seems like it can't be fixed. Take a look at IE's filter
jquery that can achieve cross-browser functionality. .
display: inline-block Try adding this to span. .
http://stackoverflow.com/questions/1375646/jquery-animate-opacity-doesnt-work-properly-on-ie
(It’s really confusing that you can’t understand English...)
Quote from the 5th floor’s reply:
opacity: '1', it seems not possible. Use IE’s filter
jquery can achieve cross-browser functionality. .
display: inline-block Try adding this to span. .
http://stackoverflow.com/questions/1375646/jquery-animate-opacity-doesnt-work-properly-on-……
Strange, for inline tags like span (display:inline), jquery’s transparency setting is invalid. . .
The solutions are:
Method 1. Set the css attribute of span: display:block (so span becomes a line display)
Method 2. Set css: float:left (reserved The span inline form: width and height)
Method 2 Example:
The jquery method is compatible
Did the poster post it? question.
You can post the code where you found the problem, and everyone can take a look
<!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-Type" content="text/html; charset=utf-8" /><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script><script type="text/javascript">$(function() { $("#logo").append("<span class='hover'>span1</span>"); //在ID为logo的标签里内部插入一个样式为hover的span $('.hover').css('opacity', 0); //设置hover的透明度为0 $('.hover').parent().hover( function() { $('.hover').stop().animate({opacity: '1'},750); }, function() { $('.hover').stop().animate({ opacity: '0'},750); }); //这是一个JQ里常用的hover()效果。当鼠标放在class为hover的父元素 //上时。停止当前标签上的所有动画并执行后面的自定义效果?hover的透明度由0渐变成100%;当鼠标离开后反之。}); </script><style type="text/css">.hover{border:solid 1px red; background:orange; float:left;}</style></head><body><div id="logo" style="background:yellow; width:300px; height:100px;"></div></body></html>
You can post the code where you found the problem so everyone can take a look
I have tested it. . .
IE6.0, 7.0 (IETester) and other browsers are valid...
Is the poster installing ie8 on the machine?
The ietester test here does have this problem
I found that removing the dtd is enough, but this is unrealistic. . .
You can also use abnormal methods to make ie8 operate in the same way as ie7. . .
Someone also encountered this problem
http://stackoverflow.com/questions/7632686/ie8-opacity-issue
<!DOCTYPE HTML><html> <head> <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /> <meta charset="gb2312" /> <title></title> <script src="http://code.jquery.com/jquery-latest.js"></script> <style> span { background:#900; } </style> </head> <body> <span> 123 </span> <script> $('span').animate({ opacity: '.1' }) </script> </body></html>