平滑的背景图像过渡 - Javascript [英] Smooth background images transition - Javascript

问题描述

http://www.chooseyourtelescope.com/ （>>该网站尚未完全响应，所以请注意它至少在15''的屏幕上，否则你不会看到我在说什么）



当你徘徊按钮（月球，星球等...... ）它改变了背景。但Chrome的过渡是错误的（image1> blank> image2）。它在IE11上工作，但有时会有滞后。我没有尝试过其他浏览器。



如何通过快速淡化实现平滑过渡？

Image1> image2，而不是image1> ;过渡颜色> image2





这是MOON按钮的代码。这和其他人一样。

（我对Javascript一无所知。我在Stackoverflow上找到了下面的脚本。）





** HTML **

 <   div     class   =  top-logos-home    id   =  top-logos-moon-front >  <   img     src   =  moon-logo.png    alt   =  MOON >  <   / div  >  

** CSS **

。 image -home  {
  position  ： 绝对;  
  width  ：  100％;  
  height  ：  100％;  
  background-image  ：  url（Frontpage.jpg）;  
  background-size  ： 封面;  
 显示 ： 内联;  
  top  ：  0;  
} 

* * JAVASCRIPT **

 jQuery（ function （）{
  var  $ body = $（' 。image-家）; 
 $（' ＃top-logos-moon-front'）。悬停（ function （）{
 $ body.css（'  background-image'，'  url（Frontpage-moon.jpg）'） 
}， function （）{
 $ body.css（'  background-image'，' '）
}）
}）

解决方案

body =

（' 。image-home'）;

（' ＃top-logos-moon-front'）。hover（ function < /跨度>（）{

http://www.chooseyourtelescope.com/ (>> The site is not entirely responsive yet, so please watch it on a minimum 15'' screen, otherwise you wont see what I'm talking about)

When you hover the buttons (moon, planet, etc...) it changes the background. But the transition is buggy on Chrome (image1>blank>image2). It s working on IE11 but sometimes with a lag. I didn t try with the other browsers.

How to make a smooth transition with a quick fade?
Image1>image2, not image1>transition color>image2


Here is the code for the MOON button. Thats the same with the others.
(I don't know anything about Javascript. I found the script below on Stackoverflow.)


**HTML**

<div class="top-logos-home" id="top-logos-moon-front"><img src="moon-logo.png" alt="MOON"></div>

**CSS**

.image-home {
         position: absolute;
         width: 100%;
         height: 100%;
         background-image: url(Frontpage.jpg);
         background-size: cover;
         display:inline;
         top:0;
    }

**JAVASCRIPT**

jQuery(function(){
        var $body = $('.image-home');
        $('#top-logos-moon-front').hover(function(){
            $body.css('background-image', 'url("Frontpage-moon.jpg")')
        }, function() {
            $body.css('background-image', '')
        })
    })

解决方案

body =

('.image-home');

('#top-logos-moon-front').hover(function(){

这篇关于平滑的背景图像过渡 - Javascript的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！