web-dev-qa-db-ja.com

ホバー時にdivの背景画像を（フェードアニメーションで）変更するjQuery

JQueryを使用して、ホバー時にdivの背景画像を変更しようとしています。これは私がこれまでに思いついたものですが、機能していません：

html

<div class="logo"></div>

css

.logo {
 width: 300px;
 height: 100px;
 background: url('http://placehold.it/300x100/ffffff/000000.png&text=first') no-repeat center top;
}

js

$('.logo').hover(
    function(){
        $(this).animate({backgroundImage: 'http://placehold.it/300x100/ffffff/000000.png&text=second'},'fast');
    },
    function(){
        $(this).animate({backgroundImage: 'http://placehold.it/300x100/ffffff/000000.png&text=first'},'fast');
});

jsfiddleここ： http://jsfiddle.net/26j6P/1/

私は何が間違っているのですか？背景色をアニメーション化すると、問題なく動作します...

jqueryhtmlcssjquery-uijquery-animate
6
Iulian Dita

JQueryのアニメーションを画像で使用することはできません-それは単に機能しません。

このようにプレーンなCSSを使用してください...

http://jsfiddle.net/26j6P/9/

これがCSSです...

.logo {
    width: 300px;
    height: 100px;
    background: url('http://placehold.it/300x100/ffffff/000000.png&text=first') no-repeat center top;
    transition: 0.5s;
}
.logo:hover {
    background-image: url('http://placehold.it/300x100/ffffff/000000.png&text=second');
}
11
Archer

.animate()を使用して非数値プロパティをアニメーション化することはできません。

6
DGS

[〜＃〜]デモ[〜＃〜]

$('.logo').hover(

    function () {
        $(this).animate({
            opacity: 0
        }, 'fast', function () {
            $(this)
                .css({
                    'background-image': 'url(http://placehold.it/300x100/ffffff/000000.png&text=second)'
                })
                .animate({
                    opacity: 1
                });
        });
    },

    function () {
        $(this).animate({
            opacity: 0
        }, 'fast', function () {
            $(this)
                .css({
                    'background-image': 'url(http://placehold.it/300x100/ffffff/000000.png&text=first)'
                })
                .animate({
                    opacity: 1
                });
        });
});
4
Tushar Gupta - curioustushar

私は少し遅れていることを知っています。しかし、これを行う必要がある人がいる場合は、そのためのjqueryプラグインがあります。次のリンクに移動し、下にスクロールしてデモを表示し、[スライドショーとしてバックストレッチを使用する]を選択します。それはうまくいきます。

http://srobbin.com/jquery-plugins/backstretch/

2
Aneeez

jQueryではできないと誰かが言っているのを見ました。これが私の例で、うまくいきます。 $(".bannerImages img")は私の画像を直接呼び出しているので、$(this)を使用してその属性を変更できます。それが完了したら、$(this)を呼び出してそのattrを変更し、アニメーションを追加することもできます。

$(".bannerImages img").animate({opacity: 0}, 'slow', function() {
     $(this)
         .attr({'src': 'images/mainSlider/ps1.jpg'})
         .animate({opacity: 1});
});
1
Marcos V DeSousa

これを試してください：-

$('.logo').hover(
    function() {
        $(this).css("background-image",
                    "url(http://placehold.it/300x100/ffffff/000000.png&text=second)"); 
    },
    function() {
        $(this).css("background-image",
                    "url(http://placehold.it/300x100/ffffff/000000.png&text=first)"); 
    }
);
1
Sujata Chanda