jQuery background-image fadeIn

Question

我正在尝试将背景图片淡入我的列表项。我已经尝试了一切，但找不到它......

HTML：

<li id="een">
    <h1>Title</h1>
    <p id="text1">Text</p>
</li>

jQuery的：

$('#een').mouseenter(function(){
    $('#een').css("background-image", "url(images/een.png)");
});

Answer 1

您需要创建一个背景img元素，该元素位于相对父级内的绝对位置。

jsFiddle

这是我的意思的一个例子。

  

HTML 请注意，我在每个li-background中添加了一个以li类作为第一项的div。这将由CSS编辑，以便在加载时不显示，并且绝对定位在相对定位的li父级中。我还将其z-index设置为-1，因此它不会显示在文本或li中的任何其他项目中，因此它是背景！

<ul>
    <li id="een">
        <div class="li-background"><img src="http://www.freenew.net/upload/pscreen/47/gradient-screensaver-32.jpg" /></div>
        <h1>Title</h1>
        <p id="text1">Text</p>
    </li>
    <li id="een">
        <div class="li-background"><img src="http://www.freenew.net/upload/pscreen/47/gradient-screensaver-32.jpg" /></div>
        <h1>Title2</h1>
        <p id="text1">Text2</p>
    </li>
    <li id="een">
        <div class="li-background"><img src="http://www.freenew.net/upload/pscreen/47/gradient-screensaver-32.jpg" /></div>
        <h1>Title3</h1>
        <p id="text1">Text3</p>
    </li>
    <li id="een">
        <div class="li-background"><img src="http://www.freenew.net/upload/pscreen/47/gradient-screensaver-32.jpg" /></div>
        <h1>Title4</h1>
        <p id="text1">Text4</p>
    </li>
</ul>

  

<强> CSS

ul li { position: relative; }
ul li:hover { color: white; }
.li-background {
    display: none;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: -1;
}
.li-background img {
    height: 100%;
    width: 100%;
}

  

jQ脚本

$("li").hover(function(eIn) {
        $(this).children(".li-background").stop().fadeIn();
    },
    function(eOut) {
        $(this).children(".li-background").stop().fadeOut();
    });

Answer 2

如果您真的想要使用背景，也可以使用switchClass。像这样：

if ($('#testDiv').hasClass('class1'))
    $('#testDiv').switchClass("class1", "class2", 500);
else 
    $('#testDiv').switchClass("class2", "class1", 500);