Как прописать анимацию для фонового изображения?

Статус
Закрыто для дальнейших ответов.

BuzinVova

New Member
Регистрация
05.11.2017
Сообщения
8
Добрый день! Я пытался изучать теорию и читать сообщения других пользователей на форумах, но не разобрался, как изменить фоновое изображение через JQuery. Пробовал прописывать "!important", но это не помогло.
Код:
<!DOCTYPE html>
<html>
<head>
<title>Разделы медицины</title>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>
<style>
.invert {
background: url(pohoronite_menya_za_plintusom_skachat_knigu_besplatno_dlya_c_7366_3.jpg) !important;
-webkit-filter: invert(100%);
-moz-filter: invert(100%);
-o-filter: invert(100%);
-ms-filter: invert(100%);
}
.grayscale {
background: url(pohoronite_menya_za_plintusom_skachat_knigu_besplatno_dlya_c_7366_3.jpg) !important;
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-o-filter: grayscale(100%);
-ms-filter: grayscale(100%);
}
.blur {
background: url(pohoronite_menya_za_plintusom_skachat_knigu_besplatno_dlya_c_7366_3.jpg) !important;
-webkit-filter: blur(8px);
-moz-filter: blur(8px);
-o-filter: blur(8px);
-ms-filter: blur(8px);
}
.sepia {
background: url(pohoronite_menya_za_plintusom_skachat_knigu_besplatno_dlya_c_7366_3.jpg) !important;
-webkit-filter: sepia(100%);
-moz-filter: sepia(100%);
-o-filter: sepia(100%);
-ms-filter: sepia(100%);
}
.original {
background: url(pohoronite_menya_za_plintusom_skachat_knigu_besplatno_dlya_c_7366_3.jpg) !important;
}
</style>
<script>
$('body').css({
'background-image' : 'url(2mnkajm.jpg) !important',
'background-size' : '100%,
'-webkit-background-size' : '100%',
'-moz-background-size' : '100%',
'-o-background-size' : '100%'
});
$('h1#MyHead').css({
'text-align' : 'center',
'font-family' : 'Arial Black',
'color' : 'Purple !important',
'background-color' : 'Lime !important'
});
$('h2').css({
'text-align' : 'center',
'font-family' : 'Gulim',
'color' : 'Pink !important',
'background-color' : 'Blue !important'
});
$('h2#cout2').css({
'text-align' : 'right',
'font-family' : 'Calibri',
'color' : 'Aqua !important',
'background-color' : 'Fuchsia !important',
'font-weight' : 'bolder'
});
$('h2#cout3').css({
'text-align' : 'left',
'font-family' : 'Haettenschweiler',
'color' : 'Lime !important',
'background-color' : 'Teal !important',
'font-weight' : 'bold'
});
$('h2#cout4').css({
'text-align' : 'justify',
'font-family' : 'Georgia',
'color' : 'Black !important',
'background-color' : '#ff9911 !important',
'text-decoration' : 'overline'
});
$('p.Blue-On-Silver').css({
'text-align' : 'left',
'font-family' : 'Comic Sans MS',
'color' : 'Blue !important',
'background-color' : 'Silver !important',
'font-size' : '34px',
'font-weight' : 'bolder'
});
$('p.Teal-On-Yellow').css({
'text-align' : 'justify',
'font-family' : 'Arial Black',
'color' : 'Teal !important',
'background-color' : 'Yellow !important',
'font-size' : '22px',
'font-weight' : 'lighter'
});
$('p.StringArray').css({
'text-align' : 'center',
'font-family' : 'Verdana',
'color' : 'Purple !important',
'background-color' : '#bbffdd !important',
'font-size' : '23px',
'font-weight' : 'lighter'
});
$('p.Aqua-On-Black').css({
'text-align' : 'right',
'font-family' : 'Haettenschweiler',
'color' : 'Aqua !important',
'background-color' : 'Black !important',
'font-size' : '37px'
});
$('p.Silver-On-Navy').css({
'text-align' : 'justify',
'font-family' : 'Microsoft YaHei',
'color' : 'Silver !important',
'background-color' : 'Navy !important',
'font-size' : '20px'
});
$('div p:nth-child(odd)').css({
'font-family' : 'Candara',
'color' : '#f8ee99 !important',
'background-color' : '#ab44ff !important',
'font-size' : '16px',
'font-weight' : 'bold'
});
$('div p:nth-child(even)').css({
'font-family' : 'Segoe Print',
'color' : 'Yellow !important',
'background-color' : 'Green !important',
'font-size' : '28px'
});
$('a:link').css({
'color' : 'Yellow !important',
});
$('a:hover').css({
'color' : 'White !important',
});
$('a:active').css({
'color' : 'Magenta !important',
});
$('a:visited').css({
'color' : 'Lime !important',
});
function DivInvertSlideUp(){
$('.invert').slideUp('slow');
}
function DivInvertSlideDown(){
$('.invert').slideDown('slow');
}
function DivGrayScaleFadeIn(){
$('.grayscale').fadeIn('slow');
}
function DivGrayScaleFadeOut(){
$('.grayscale').fadeOut('slow');
}
function DivBlurShow(){
$('.blur').show('slow');
}
function DivBlurHide(){
$('.blur').hide('slow');
}
function DivSepiaSlideUp(){
$('.sepia').slideUp('slow');
}
function DivSepiaSlideDown(){
$('.sepia').slideDown('slow');
}
function DivOriginalShow(){
$('.original').show();
}
function DivOriginalHide(){
$('.original').hide();
}
</script>
</head>
<body onload="$(this).fadeToggle('slow')">
</body>
</html>

Я прописал изображение, но не знаю, как привязать анимацию изменения прозрачности к тегу body.

<!DOCTYPE html>
<html>
<head>
<title>Разделы медицины</title>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>
<style>
.invert {
background: url(pohoronite_menya_za_plintusom_skachat_knigu_besplatno_dlya_c_7366_3.jpg);
-webkit-filter: invert(100%);
-moz-filter: invert(100%);
-o-filter: invert(100%);
-ms-filter: invert(100%);
}
.grayscale {
background: url(pohoronite_menya_za_plintusom_skachat_knigu_besplatno_dlya_c_7366_3.jpg);
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-o-filter: grayscale(100%);
-ms-filter: grayscale(100%);
}
.blur {
background: url(pohoronite_menya_za_plintusom_skachat_knigu_besplatno_dlya_c_7366_3.jpg);
-webkit-filter: blur(8px);
-moz-filter: blur(8px);
-o-filter: blur(8px);
-ms-filter: blur(8px);
}
.sepia {
background: url(pohoronite_menya_za_plintusom_skachat_knigu_besplatno_dlya_c_7366_3.jpg);
-webkit-filter: sepia(100%);
-moz-filter: sepia(100%);
-o-filter: sepia(100%);
-ms-filter: sepia(100%);
}
.original {
background: url(pohoronite_menya_za_plintusom_skachat_knigu_besplatno_dlya_c_7366_3.jpg);
}
</style>
<script>
$('body').bind('load', function () {
$(this).fadeToggle(2000);
});
$('h1#MyHead').css({
'text-align' : 'center',
'font-family' : 'Arial Black',
'color' : 'Purple !important',
'background-color' : 'Lime !important'
});
$('h2').css({
'text-align' : 'center',
'font-family' : 'Gulim',
'color' : 'Pink !important',
'background-color' : 'Blue !important'
});
$('h2#cout2').css({
'text-align' : 'right',
'font-family' : 'Calibri',
'color' : 'Aqua !important',
'background-color' : 'Fuchsia !important',
'font-weight' : 'bolder'
});
$('h2#cout3').css({
'text-align' : 'left',
'font-family' : 'Haettenschweiler',
'color' : 'Lime !important',
'background-color' : 'Teal !important',
'font-weight' : 'bold'
});
$('h2#cout4').css({
'text-align' : 'justify',
'font-family' : 'Georgia',
'color' : 'Black !important',
'background-color' : '#ff9911 !important',
'text-decoration' : 'overline'
});
$('p.Blue-On-Silver').css({
'text-align' : 'left',
'font-family' : 'Comic Sans MS',
'color' : 'Blue !important',
'background-color' : 'Silver !important',
'font-size' : '34px',
'font-weight' : 'bolder'
});
$('p.Teal-On-Yellow').css({
'text-align' : 'justify',
'font-family' : 'Arial Black',
'color' : 'Teal !important',
'background-color' : 'Yellow !important',
'font-size' : '22px',
'font-weight' : 'lighter'
});
$('p.StringArray').css({
'text-align' : 'center',
'font-family' : 'Verdana',
'color' : 'Purple !important',
'background-color' : '#bbffdd !important',
'font-size' : '23px',
'font-weight' : 'lighter'
});
$('p.Aqua-On-Black').css({
'text-align' : 'right',
'font-family' : 'Haettenschweiler',
'color' : 'Aqua !important',
'background-color' : 'Black !important',
'font-size' : '37px'
});
$('p.Silver-On-Navy').css({
'text-align' : 'justify',
'font-family' : 'Microsoft YaHei',
'color' : 'Silver !important',
'background-color' : 'Navy !important',
'font-size' : '20px'
});
$('div p:nth-child(odd)').css({
'font-family' : 'Candara',
'color' : '#f8ee99 !important',
'background-color' : '#ab44ff !important',
'font-size' : '16px',
'font-weight' : 'bold'
});
$('div p:nth-child(even)').css({
'font-family' : 'Segoe Print',
'color' : 'Yellow !important',
'background-color' : 'Green !important',
'font-size' : '28px'
});
$('a:link').css({
'color' : 'Yellow !important',
});
$('a:hover').css({
'color' : 'White !important',
});
$('a:active').css({
'color' : 'Magenta !important',
});
$('a:visited').css({
'color' : 'Lime !important',
});
function DivInvertSlideUp(){
$('.invert').slideUp('slow');
}
function DivInvertSlideDown(){
$('.invert').slideDown('slow');
}
function DivGrayScaleFadeIn(){
$('.grayscale').fadeIn('slow');
}
function DivGrayScaleFadeOut(){
$('.grayscale').fadeOut('slow');
}
function DivBlurShow(){
$('.blur').show('slow');
}
function DivBlurHide(){
$('.blur').hide('slow');
}
function DivSepiaSlideUp(){
$('.sepia').slideUp('slow');
}
function DivSepiaSlideDown(){
$('.sepia').slideDown('slow');
}
function DivOriginalShow(){
$('.original').show();
}
function DivOriginalHide(){
$('.original').hide();
}
</script>
</head>
<body background="2mnkajm.jpg" style="background-size:100%">

</body>
</html>
 

Вложения

BaNru

Пацифизжу
Команда форума
Регистрация
13.11.2010
Сообщения
4 138
У вас много кода вообще не относящегося к вопросу.

Какую анимацию надо? Расскажите подробнее.
 
Статус
Закрыто для дальнейших ответов.
Верх Низ