I have a row of menu buttons, and I need the background-image to be transparent, and then fade in on rollover (hover). can I use jQuery to acheive this?
我有一排菜单按钮,我需要背景图像是透明的,然后在翻转时淡入(悬停)。我可以用jQuery来实现这个吗?
http://jsfiddle.net/craigzilla/JdHWY/
4 个解决方案
#1
4
Since it is not possible to fade background only while text in the block is visible, you can make small changes in the markup:
由于只有在块中的文本可见时才能淡化背景,您可以在标记中进行小的更改:
HTML:
<div class="menuitem"><span></span>ITEM 01</div>
CSS:
.menuitem {
position: relative;
/* ... */
}
.menuitem span {
position: absolute;
display: none;
top: 0;
left: 0;
width: inherit;
height: inherit;
background-image: url(http://thumbs.gograph.com/gg58916312.jpg);
z-index: -1;
}
JavaScript:
$(".menuitem").hover(function() {
$(this).children("span").fadeIn();
}, function() {
$(this).children("span").fadeOut();
});
#2
2
HTML:
<div class="header">
<div class="menuitem">ITEM 01</div>
<div class="menuitem">ITEM 02</div>
<div class="menuitem">ITEM 03</div>
<div class="menuitem">ITEM 04</div>
</div>
CSS:
.menuitem {
background-image: url(http://thumbs.gograph.com/gg58916312.jpg);
width: 180px;
margin-left: 1px;
margin-right: 1px;
margin-top: 102px;
height: 75px;
float: left;
cursor: pointer;
font-size: 36px;
text-align: center;
line-height: 85px;
opacity: 0.5
}
jQuery:
$('.menuitem').hover(function() {
$(this).stop().animate({
opacity: 1
}, 300);
}, function() {
$(this).stop().animate({
opacity: 0.5
}, 300);
});
See the demo
看演示
#3
0
It is something like this (top of my head) and then you've have to add fadin() fadeout() to the mix for instance.
它是这样的(我的头脑),然后你必须添加fadin()fadeout()到混合。
#4
0
demo jsFiddle
$('.menuitem').fadeTo(0,0.7).on('mouseenter mouseleave',function( ev ){
ev=ev.type==='mouseenter' ? // event is mouseenter?
$(this).stop().fadeTo(200,1) : // (if yes)
$(this).stop().fadeTo(200,0.7) ; // (if no) event is mouseleave
});
This will handle pretty well mustiple-fast mouseovers thanks to .stop()
that will clear animations queue.
由于.stop()可以清除动画队列,因此可以处理非常好的快速鼠标。
#1
4
Since it is not possible to fade background only while text in the block is visible, you can make small changes in the markup:
由于只有在块中的文本可见时才能淡化背景,您可以在标记中进行小的更改:
HTML:
<div class="menuitem"><span></span>ITEM 01</div>
CSS:
.menuitem {
position: relative;
/* ... */
}
.menuitem span {
position: absolute;
display: none;
top: 0;
left: 0;
width: inherit;
height: inherit;
background-image: url(http://thumbs.gograph.com/gg58916312.jpg);
z-index: -1;
}
JavaScript:
$(".menuitem").hover(function() {
$(this).children("span").fadeIn();
}, function() {
$(this).children("span").fadeOut();
});
#2
2
HTML:
<div class="header">
<div class="menuitem">ITEM 01</div>
<div class="menuitem">ITEM 02</div>
<div class="menuitem">ITEM 03</div>
<div class="menuitem">ITEM 04</div>
</div>
CSS:
.menuitem {
background-image: url(http://thumbs.gograph.com/gg58916312.jpg);
width: 180px;
margin-left: 1px;
margin-right: 1px;
margin-top: 102px;
height: 75px;
float: left;
cursor: pointer;
font-size: 36px;
text-align: center;
line-height: 85px;
opacity: 0.5
}
jQuery:
$('.menuitem').hover(function() {
$(this).stop().animate({
opacity: 1
}, 300);
}, function() {
$(this).stop().animate({
opacity: 0.5
}, 300);
});
See the demo
看演示
#3
0
It is something like this (top of my head) and then you've have to add fadin() fadeout() to the mix for instance.
它是这样的(我的头脑),然后你必须添加fadin()fadeout()到混合。
#4
0
demo jsFiddle
$('.menuitem').fadeTo(0,0.7).on('mouseenter mouseleave',function( ev ){
ev=ev.type==='mouseenter' ? // event is mouseenter?
$(this).stop().fadeTo(200,1) : // (if yes)
$(this).stop().fadeTo(200,0.7) ; // (if no) event is mouseleave
});
This will handle pretty well mustiple-fast mouseovers thanks to .stop()
that will clear animations queue.
由于.stop()可以清除动画队列,因此可以处理非常好的快速鼠标。