Исчезать в фоновом режиме с помощью jQuery при наведении, затем исчезать

Question

В настоящее время я использую этот код для изменения фона css3 моей страницы, когда вы наводите курсор мыши на абзац:

$(function(){
    $('#web').hover( function(){
          $('html').css('background', '#000 url("space-image.png") center center fixed no-repeat');
     });
});

, он работает нормально, но я хочу добавить к нему fadIn, чтобы он был более плавным.Кроме того, я хотел бы вернуть новый фон к старому, когда вы не наводите курсор мыши на абзац (#web).

Answer 1

Вы можете легко сделать это с помощью jQuery и jQuery UI и анимировать классы вместо того, чтобы анимировать отдельные атрибуты, используя SwitchClass .

jQuery:

$(document).ready(function(){
    $("#f1_container").hover(function(){
        $("body").switchClass('load', 'webbg', 100);
    },
    function(){
        $("body").switchClass('webbg', 'load', 100);
    });
});

Просто установите свойства стиля для oldClass и newClass в вашем CSS.(Переименование соответствующим образом)

Убедитесь, что вы загружаете библиотеку пользовательского интерфейса jQuery:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.15/jquery-ui.min.js"></script>

Рабочий пример: http://jsfiddle.net/yPBVs/

Answer 2

Вы можете использовать jQuery animate() для анимации изменений css во времени.

[РЕДАКТИРОВАТЬ]

Ваш код должен использовать что-то вроде:

$(function() {
    $('#web').hover( function() {
        $('html').animate({
            background: #000 url("space-image.png") center center fixed no-repeat
        }, 5000, 
        function() {
            // Animation complete.
        });
    });
});

Пример кода от api.jquery.com / animate :

$('#clickme').click(function() {
  $('#book').animate({
    opacity: 0.25,
    left: '+=50',
    height: 'toggle'
  }, 5000, function() {
    // Animation complete.
  });
});

Answer 3

$('#web').hover( 
    function() { $("#myOverlay").fadeIn(); }, 
    function() { $("#myOverlay").fadeOut(); }
});

Не думаю, что вы можете исчезнуть с фона, под ним ничего нет. Вам понадобится оверлей.

Answer 4

<script>
$(document).ready(function(){
$("#f1_container").hover(function(){
$("body").switchClass('load', 'webbg', 950);
},
function(){
$("body").switchClass('webbg', 'load', 950);
});
});
</script>
<script>
$(document).ready(function(){
$("#f1_container2").hover(function(){
$("body").switchClass('load', 'photobg', 950);
},
function(){
$("body").switchClass('photobg', 'load', 950);
});
});
</script>

Это решение, которое я буду использовать. Спасибо за помощь.