jQuery在悬停时更改div的背景图像(带有淡入淡出动画)

尤利安·迪塔

我正在尝试使用jQuery更改div上的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/

我究竟做错了什么?如果我设置背景颜色的动画,效果很好...

恢复Monica Cellio

您不能对图像使用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');
}

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

Android使用淡入/淡出动画更改背景图像

来自分类Dev

jQuery带有背景图像的淡入淡出导航。图片不会消失,文字会消失

来自分类Dev

Android图像淡入淡出动画

来自分类Dev

在背景图像上创建淡入/淡出动画,以在响应中更改CSS

来自分类Dev

jQuery 减慢淡入淡出动画

来自分类Dev

淡入淡出动画

来自分类Dev

淡入淡出DIV +悬停时停止动画

来自分类Dev

图像上的无限淡入淡出动画

来自分类Dev

SKLabelNode的淡入淡出动画更改文本

来自分类Dev

SwiftUI-使用淡入淡出动画更改文本

来自分类Dev

SKLabelNode的淡入淡出动画更改文本

来自分类Dev

如何在此JQuery图像交换中添加简单的淡入淡出动画?

来自分类Dev

带有css3转换的角度淡入淡出动画

来自分类Dev

添加带有淡入淡出动画的ActionBar项

来自分类Dev

如何减慢jQuery的淡入淡出动画?

来自分类Dev

jQuery 淡入淡出动画显示数据

来自分类Dev

悬停时使用淡入淡出效果更改图像后,单击div时交换图像

来自分类Dev

CSS Sprite淡入淡出动画

来自分类Dev

延迟盒子淡入淡出动画

来自分类Dev

NSVisualEffectView 淡入淡出动画

来自分类Dev

加载时淡入淡出 div 背景

来自分类Dev

在悬停时使用JavaScript或CSS在背景图片中淡入淡出

来自分类Dev

在悬停时使用JavaScript或CSS在背景图片中淡入淡出

来自分类Dev

jQuery淡入淡出内容+更改div

来自分类Dev

jQuery淡入淡出效果在mouseenter上的背景图像

来自分类Dev

jQuery淡入淡出背景图片

来自分类Dev

悬停页面背景更改颜色淡入淡出效果(css或jQuery)

来自分类Dev

悬停页面背景更改颜色淡入淡出效果(css或jQuery)

来自分类Dev

jQuery背景图片淡入淡出-有更好的方法吗?

Related 相关文章

热门标签

归档