Issue
I've a simple page and I would like to change the background image image using mounter enter at buttons. I got three buttons at background.
Problem is that, I want to add fadeIn/fadeOut effect, what I did(I add transition: 1.5s in CSS). But then, when I move too fast between buttons, the fadein/out effect doesn't work properly.
$(document).ready(function() {
var svatba = $(".svatbauvod");
var promo = $(".promouvod");
var after = $(".afteruvod");
var pozadi = $(".uvod-body");
svatba.on('mouseenter', function() {
pozadi.css('background-image', 'url(img/uvod1.jpg)');
});
promo.on('mouseenter', function() {
pozadi.css('background-image', 'url(img/uvod2.jpg)');
});
after.on('mouseenter', function() {
pozadi.css('background-image', 'url(img/uvod3.jpg)');
});
});.uvod-body {
background-image: url("/img/uvod1.jpg");
background-size: cover;
height: 100vh;
width: auto;
outline: 3px solid red;
display: flex;
justify-content: center;
align-items: center;
transition: 1.5s;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<main class="uvod-body">
<div class="uvod-back">
<h1><a href="#" class="svatbauvod">Svatební videa</a></h1>
<h1><a href="#" class="promouvod">Promo videa</a></h1>
<h1><a href="#" class="afteruvod">After movie</a></h1>
</div>
</main>
</body>Solution
If you move the images to classes and use jQuery to change which of these classes is active, you can use the native CSS transitions to achieve your effect.
Here is a sample. I do not have access to the images you are referencing, so I've used colors instead. The fade effect is the same.
Notice that we are using addClass() and removeClass(). You can add or remove multiple classes at a time by specifying them in a space-delimited string.
I have applied one of the classes to the element to start. This is similar to the background-image property you had applied.
$(document).ready(function() {
var svatba = $(".svatbauvod");
var promo = $(".promouvod");
var after = $(".afteruvod");
var pozadi = $(".uvod-body");
svatba.on('mouseenter', function() {
pozadi.addClass('uvod1').removeClass('uvod2 uvod3');
//.css('background-image', 'url(img/uvod1.jpg)');
});
promo.on('mouseenter', function() {
pozadi.addClass('uvod2').removeClass('uvod1 uvod3');
//.css('background-image', 'url(img/uvod2.jpg)');
});
after.on('mouseenter', function() {
pozadi.addClass('uvod3').removeClass('uvod1 uvod2');
//.css('background-image', 'url(img/uvod3.jpg)');
});
});.uvod-body {
/* background-image: url("/img/uvod1.jpg"); */
background-size: cover;
height: 100vh;
width: auto;
outline: 3px solid red;
display: flex;
justify-content: center;
align-items: center;
transition: 1.5s;
}
.uvod1 {
/* background-image: url("/img/uvod1.jpg"); */
background-color: red;
}
.uvod2 {
/* background-image: url("/img/uvod2.jpg"); */
background-color: green;
}
.uvod3 {
/* background-image: url("/img/uvod3.jpg"); */
background-color: blue;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<main class="uvod-body uvod1">
<div class="uvod-back">
<h1><a href="#" class="svatbauvod">Svatební videa</a></h1>
<h1><a href="#" class="promouvod">Promo videa</a></h1>
<h1><a href="#" class="afteruvod">After movie</a></h1>
</div>
</main>
</body>Answered By - D M
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.