fade in background jquery

Я пытаюсь пометить некоторые изображения на фоне моего сайта, но не работает T_T. Спасибо заранее!fade in background jquery

HTML:

<body> 
    <div id="menu1"></div> 
    <div id="menu2"></div> 
    <div id="menu3"></div> 
</body>

CSS:

body { 
    background-color: #1f304e; 
    background-image: url('images/bg.jpg'); 
    background-repeat: no-repeat; 
    background-attachment:fixed; 
    background-position: center 0px; 
}

JQuery:

$('#menu1').click(function(){ 
    $(body).animate({background : url('images/bg1.jpg') }, 600); 
}); 
$('#menu2').click(function(){ 
    $(body).animate({background : url('images/bg2.jpg') }, 600); 
}); 
$('#menu3').click(function(){ 
    $(body).animate({background : url('images/bg3.jpg') }, 600); 
});

источник

2013-07-24 BrunoWB

использовать css вместо анимации – Hushme

Вы помещаете функцию щелчка в 'document.ready()' функцию? – Dinesh

Вы не можете непосредственно анимировать свойство фоновое изображение элемента. Вы можете выгораете весь элемент, хотя, так что попытайтесь создать div, который содержит изображение, и исчезать, что в

Пытаться имитировать фон с DIV вместо:.

CSS:

#bg { 
    background-color: #1f304e; 
    background-image: url('images/bg.jpg'); 
    background-repeat: no-repeat; 
    background-attachment:fixed; 
    background-position: center 0px; 
    position: fixed; 
    width: 100%; 
    height: 100%; 
    z-index: -1; 
}

HTML:

<body> 
    <div id="bg"></div> 
    <div id="menu1"></div> 
    <div id="menu2"></div> 
    <div id="menu3"></div> 
</body>

Javascript:

$('#menu1').click(function(){ 
    $("#bg").fadeOut(function() { 
    $("#bg").css({background : url('images/bg1.jpg') }); 
    $("#bg").fadeIn(300); 
    }, 300); 
}); 
$('#menu2').click(function(){ 
    $("#bg").fadeOut(function() { 
    $("#bg").css({background : url('images/bg2.jpg') }); 
    $("#bg").fadeIn(300); 
    }, 300); 
}); 
$('#menu3').click(function(){ 
    $("#bg").fadeOut(function() { 
    $("#bg").css({background : url('images/bg3.jpg') }); 
    $("#bg").fadeIn(300); 
    }, 300); 
});

Это приведет к исчезновению фона, поменяет изображение, а затем затушевывает его. Если вам нужен правильный кроссфейд, вам понадобятся как минимум два div в фоновом режиме.

источник

2013-07-24 04:37:54 compid

Я сделал div «#bg» (мне нужно было до magin -8, чтобы он соответствовал экрану). но я использовал: $ ('# bg'). Animate ({opacity: 0}, 'slow', function() { $ (this) .css ({'background-image': 'url (images/bg2.jpg) '}). animate ({opacity: 1}); }); он работает почти идеально, но переход белый, если я могу исчезнуть в черном, он подойдет. – BrunoWB

вы должны установить маркер тела на 0, чтобы избежать необходимости в отрицательных границах, и установить цвет фона тела на черный, чтобы эффект «выцветания до черного» – compid

margin 0 не работал o.o, поэтому мне пришлось использовать отрицательный. черный bg работает;) – BrunoWB

HTML

<div class="main"></div>

CSS

.main { 
    -webkit-transition: all 1s ease; 
    -moz-transition: all 1s ease; 
    -o-transition: all 1s ease; 
    transition: all 1s ease; 
    background-image: url(imagesrc); 
    background-size: cover; 
    background-repeat: no-repeat; 
}

setTimeout(function() { 

    $(".main").css("background-image", "url(imageSrc)"); 
}, 2000);

Если вы хотите изменить фон с несколькими I mages then,

var backgroundPath = "images/"; 
var backgrounds = ["image1.png", "image2.png", "image3.png", "image4.png"]; 
var i = 0; 

setTimeout(function() { 

    var timer = setInterval(function() { 

     $(".main").css("background-image", "url(" + backgroundPath + backgrounds[i] + ")"); 

     i ++; 

     if (i >= backgrounds.length) { 

      i = 0; 
     } 

    }, 2000); 

}, 3000);

Измените css и js в соответствии с вашими требованиями. Ура !!

источник

2016-05-04 16:33:24

fade in background jquery

ответ

Смежные вопросы