我有一个在一组列表元素上运行的过滤器,它将较小的理想元素淡化到0.25不透明度但是我希望它们的不透明度返回到1,然后在悬停时反复回到0.25.这样做相当简单吗？
我只是很难找到一种方法来获取所选元素的当前不透明度,因此我可以将其存储在变量中以供使用.
$('#centerPanel li').hover(function(){
var currentOpacity = $(this).?????
$(this).fadeTo(1,1);
},
function(){
$(this).fadeTo(1,currentOpacity);
});
我正逐渐淡出,在一个div中:
$('.formErrors').fadeTo('fast', 0);
$('.formErrors').fadeTo('slow', 1);
但是当我在IE 8中执行此操作时,似乎有点CSS:
.formErrors li { font-weight: bold; }
导致文本回复相当扭曲:(图片如下)
http://www.newmania.com/images/error.jpg
我申请的HTML是:
<div class="formErrors">
There are errors in your submission. Please fix the following and try again:
<ul><li>Action is empty</li></ul>
</div>
它在Firefox中运行良好.有什么想法吗？
我在这里使用这个div fadeTo代码,根据悬停,它会消除两个div中的一个.
我想做的是添加第三个选项 - 第三个div叫做#maindiv - 这样:"如果将鼠标悬停在#maindiv上,请不要淡化#sidebar或#primarycontainter,但如果将鼠标悬停在#sidebar上或#primarycontainter,然后淡出其中任何一个(取决于悬停),但不要淡化#maindiv."
我如何保留现有的其他语句,使IE6不使用任何代码？谢谢....
编辑2/3/10:由于三个div,是否有不同的处理方法？是否需要回调,或者某种方式刷新函数,因为下面的代码会导致fadeTo动作不一致？
$(document).ready(function(){
if ($.browser.version = jQuery.browser.msie &&
parseInt(jQuery.browser.version) == 6) {
} else {
$("#sidebar").fadeTo('fast', 0.5);
$("#sidebar").hover(function(){
$(this).stop().fadeTo('fast', 1);
$("#primarycontainer").stop().fadeTo('fast', 0.5);
},function(){
$(this).stop().fadeTo('fast', 0.5);
$("#primarycontainer").stop().fadeTo('fast', 1);
}
);
}
});
编辑2/09/10:
Ed Woodcock在下面的回答是有效的,在我对他的回答的评论中稍作修改(我的选择).
这是有问题的CSS:
<body>
<div id="outerdiv" div style="position: relative;">
<div id="maindiv" div style="position:relative;">Lorem ipsum dolor sit amet.</div>
<div id="content">
<div id="primary" div style="float: left; margin-right: -20.0em; width: 100%;">
<div id="primarycontainer" div style="margin-right: 16.0em;">
<p>Lorem ipsum dolor sit amet.<p> …尝试获得不透明度来切换.基本上,列表项设置为零不透明度,从而保持其高度.单击列表子类别头时,空列表区域将下拉列表项的深度,然后不透明度应切换以显示列表元素.再次单击子类别列表头时,列表项的不透明度将逐渐变为零,然后列表区域将折叠.需要将列表项保留在那里,因此不透明度方法而不是隐藏,hideToggle或从DOM中删除它们的类似函数. http://jsfiddle.net/hotdiggity/zn6cz/10/
<!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" />
<title>jQuery Toggle Opacity</title>
<script type="text" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
</head>
<body>
<ul class="list">
<li><a href="#">Subcategory</a></li>
<li id="id-1" class="expandable"><a href="#">Subcategory - Click this one</a>
<ul>
<li>Sub menu item 1</li>
<li>Sub menu item 2</li>
<li>Sub menu item 3</li>
<li>Sub menu item 4</li>
<li>Sub menu item 5</li>
<li>Sub menu item 6</li>
</ul></li>
<li><a href="#">Subcategory</a></li>
<li><a href="#">Subcategory</a></li>
</ul>
</body>
</html>
JQuery的...
?$(document).ready(function(){
$('.list li.expandable ul').hide();
$('.list li.expandable ul li').css({ …我只是尝试制作一个脚本,当你悬停链接,图像等时,它会在工具提示中淡出.除了一次只有一个工具提示的实际淡入外,一切正常.如果不清楚我的意思是:我想悬停图像并在图像正上方显示工具提示,页面上的每个其他工具提示都不应该是可见的.我知道我的错误是什么(图像的悬停会消除所有工具提示,因为它们都有相同的类)但我不知道如何修复它.我希望我能正确解释我的问题,如果有人能帮助我,我会很高兴.(请原谅我,如果我的英语不是最好的,那显然不是我的母语)
这是我的代码:
$(function() {
$('.button').hover(function() {
$('.tooltip').stop().fadeTo("fast", 0.8);
}, function() {
$('.tooltip').fadeTo("fast", 0.0);
});
});.wrapper{
width:90px;
margin:auto;
margin-top:10%;
}
.tooltip{
margin-left: auto;
margin-right:auto;
background-color:#34495e;
color:white;
border-radius:5px;
opacity:0.8;
padding:5px;
text-align: center;
font-size:15px;
font-family: 'Open Sans', sans-serif;
display: block;
opacity:0.0;
}
.button img{
margin-top:5px;
height:50px;
width: 50px;
display:block;
margin-left:auto;
margin-right:auto;
}
.button img:hover{
cursor:pointer;
}<div class="wrapper">
<div class="tooltip">
189k Likes
</div>
<div class="button">
<img src="https://cdn2.iconfinder.com/data/icons/metro-uinvert-dock/256/Twitter_alt_3.png"/>
</div>
</div>
<div class="wrapper">
<div class="tooltip">
200 Followers
</div>
<div class="button">
<img src="http://lakemacholidayparks.com.au/wp-content/uploads/2014/09/facebook-icon.png"/>
</div>以下是我在jsfiddle.net上的代码: …
我想要实现的是,当您将鼠标悬停在图像上时,其不透明度将减少到一半.我必须在这里做一个明显的错误,但无法弄清楚到底是什么.任何提示将不胜感激.
<a href="#" id="right-button"><img class="arrow" src="http://placekitten.com/200/200" alt="right" /></a>
$('.arrow').hover(
function() {
$(this).find('img').fadeTo('slow', 0.5);
},
function() {
$(this).find('img').fadeTo('slow', 1);
}
);
我正在创建一个教程,并希望淡出页面上的每个div,除了我希望他们看到的div.我怎么能用fadeTo做到这一点？
我现在已经开始褪去整个身体了.如何将它设置为淡化身体而不是div id"step2"？
码:
<script type="text/javascript">
$("body").fadeTo("slow", 0.5, function() {
// Animation complete.
});
</script>
fadeto ×7
jquery ×7
css ×3
html ×2
opacity ×2
hover ×1
if-statement ×1
javascript ×1
toggle ×1