平稳变化的背景而徘徊的元素

上，而搜索解决我的问题，我发现用户阿伦P佐尼的有关如何使变化的背景平稳变化的背景而徘徊的元素

jQuery(function(){ 
    var $body = $('body'); 
    $('.menu-item-1').hover(function(){ 
     $body.css('background-image', 'url("yadayadayada.jpg")') 
    }, function() { 
     $body.css('background-image', '') 
    }) 
})

的效果，但如何使一个答案一个平稳的变化？

来源

2014-09-20 Артур Пипченко

你所说的 “平改” 呢？像淡入？ – 2014-09-20 20:20:35

是的，确切地说，当一个背景图像顺利变成另一个 – 2014-09-20 20:22:34

Css转换 – 2014-09-20 20:23:23

据我所知，如果没有大量（和缓慢）的javascripting，每个像素为每个图像源创建动画，就无法在单个元素上完成此操作。对我来说似乎不好。

相反，向您的DOM中添加另一个元素并为其设置动画效果，并且您可以使用CSS转换进行设置。简单，快速。

这里是重要的CSS部分：

body { 
    background: url(image1.jpg); 
} 
div { 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    background: url(image2.jpg); 
    transition: all 0.5s linear; 
} 
div:hover { 
    opacity: 0; 
}

这是给你一个工作fiddle。

编辑时，OP评论：

从CSS中删除:hover选择和修改您的JS是这样的：

jQuery(function(){ 
    var $div = $('div'); 
    $('.menu-item-1').hover(function(){ 
     $div.css({opactiy: 0}) 
    }, function() { 
     $div.css({opacity: 1}) 
    }) 
})

来源

2014-09-20 21:39:12

的主要想法是，一个div的背景应该改变，同时悬停另一个元素 – 2014-09-20 21:51:40

好的。没问题。使用相同的基本aproach，但使用您自己的jQuery事件处理程序来触发CSS转换。我编辑了我的答案以反映这一变化。 – 2014-09-20 21:57:27

该div包含另一个div，其中包含悬停元素。所以，如果主div具有不透明度：0，那么所有的子元素都是不可见的 – 2014-09-20 22:22:10

视您有它设置，你可以做类似

$('.myimage').on('mouseover', function(){ 
$('.backgroundimage').fadeOut("slow",  function(){ 
complete : function() { 
$('.otherimage').fadeIn(); 
} 
}); 
});

我我的手机上，并没有尝试这样的代码，它只是给你一个想法，把我的头顶部。

来源

2014-09-20 21:16:00

平稳变化的背景而徘徊的元素

回答

相关问题