Мерцание белого при переходе

Question

Мерцание белого при переходе

0

Я сделал этот действительно базовый сценарий, который просто меняет фоновое изображение при падении на div. хорошо изображение мерцает белым в течение очень короткого времени, а maby.1sec выполняет переход. Кажется, я не могу это исправить? вот базовый код:

$(document).ready(function(){
    $('#wrapper').mouseenter(function() {
       $("body").css({"background":"url(images/main_background_over.jpg) no-repeat center fixed",
                    "-webkit-transition":"all 1.0s ease-in-out",
                    "-moz-transition":"all 1.0s ease-in-out",
                    "-o-transition":"all 1.0s ease-in-out",
                    "-ms-transition":"all 1.0s ease-in-out",
                    "transition":"all 1.0s ease-in-out",
                    "background-size":"cover"
            });
    });     

    $('#wrapper').mouseleave(function() {
       $("body").css({"background":"url(images/main_background.jpg) no-repeat center fixed",
                    "background-size":"cover"
            });
    }); 
});

У меня также проблемы с переходом в firefox и safari, если кто-то может помочь мне в этом, пожалуйста.

henk.io 23 окт. 2013, в 03:41

Источник

Теги:

javascript

jquery

css

css3

1 ответ

Ещё вопросы

josh · Accepted Answer · 2013-10-22T23-23-00.000Z

Что произойдет, если вы добавите transition в файл css? То есть вместо добавления переходов через jQuery добавьте их непосредственно в декларацию css вашего body.

body {
    -webkit-transition: all 1.0s ease-in-out;
    -moz-transition: all 1.0s ease-in-out;
    -o-transition: all 1.0s ease-in-out;
    -ms-transition: all 1.0s ease-in-out;
    transition: all 1.0s ease-in-out;
    background-size: cover;
    background: url(images/main_background.jpg) no-repeat center fixed;
}

Затем в вашем jQuery просто измените свойство фона для body.

$(function(){
    $('#wrapper').mouseenter(function() {
       $("body").css("background":"url(images/main_background_over.jpg) no-repeat center fixed");
    });     

    $('#wrapper').mouseleave(function() {
       $("body").css("background":"url(images/main_background.jpg) no-repeat center fixed");
    }); 
});