jQuery在悬停的背景图像淡出

时间:2022-11-04 19:01:27

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();
});​

DEMO: http://jsfiddle.net/JdHWY/11/

#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()到混合。

http://jsfiddle.net/JdHWY/4/

#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();
});​

DEMO: http://jsfiddle.net/JdHWY/11/

#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()到混合。

http://jsfiddle.net/JdHWY/4/

#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()可以清除动画队列,因此可以处理非常好的快速鼠标。