2

リンクにカーソルを合わせると、divの背景画像を変更する次のコードがあります。

<script>

$('.main').on('mouseover', 'a', function () {

var background = "url('" + $(this).attr('data-background') + "')";

$('.main').css('background-image', background)
});

</script>

それに付随するhtml..

<div style="background: #f2f2f2 no-repeat center; background-size:100% auto;" class="main">
<div id="logo"></div>
<div class="center-inner">
<h3>
<a href="#" data-background="img/img1.jpg">img1</a> 
<a href="#" data-background="img/img2.jpg">img2</a> 
<a href="#" data-background="img/img3.jpg">img3</a>
</h3></div>
<div id="copyright"><p>©2013</p></div>
</div>

このコードにフェードインおよびフェードアウト (マウスアウト時) 効果を追加するにはどうすればよいですか?

ありがとうございました！

4

1 に答える 1

0

動作中のjsFiddleデモ

コンテナに別の要素を追加backgroundし、不透明度を変更します。

HTML

<div class="main">
    <div id="bg"></div>
    <div id="logo"></div>
    <div class="center-inner"><h3>
        <a href="#" data-background="http://placekitten.com/200/200">img1</a> 
        <a href="#" data-background="http://placekitten.com/200/200">img2</a> 
        <a href="#" data-background="http://placekitten.com/200/200">img3</a>
    </h3></div>
    <div id="copyright"><p>©2013</p></div>
</div>

CSS

.main, #logo, .center-inner, #copyright {
    position: relative;
}

#bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #f2f2f2 no-repeat center; background-size:100% auto;
}

JavaScript

$(function () {
    $('.main').on('mouseover', 'a', function () {
        var background = "url('" + $(this).attr('data-background') + "')";

        $('#bg')
            .stop()
            .css('opacity', 0)
            .css('background-image', background)
            .animate({opacity: 1});
    });
});
于 2013-06-10T03:20:51.560 に答える