I have images that I want to be invisible and then faded in when certain events occur. My jQuery works fine and the elements are positioned correctly, I just can't get the elements to fade in.
When I type in console $('#img1').fadeIn();nothing happens.
CSS
img {
position: absolute;
border-radius: 20px;
height: 195px;
width: 300px;
opacity: 0;
}
#img1 {
left: 270px;
}
#img2 {
right: 270px;
}
Use display: none; instead opacity: 0;
http://jsfiddle.net/rLjz1rv0/
Remove opacity: 0, and replace by
visibility: hidden;
use fadeTo
$('#img1').fadeTo( 'slow', '1')
demo - http://jsfiddle.net/rLjz1rv0/1/
Related
In this stackblitz, I am not able to add animation while closing, I tried it using transform, but it didnt seem to work
HTML
Blocker is used to covering the full screen in a half-transparent mode in mobile devices
const sidebar = document.querySelector('.sidebar');
sidebar.querySelector('.blocker').onclick = hide;
function show() { // swipe right
sidebar.classList.add('visible');
document.body.style.overflow = 'hidden';
}
function hide() { // by blocker click, swipe left, or url change
sidebar.classList.remove('visible');
document.body.style.overflow = '';
}
function toggle() {
sidebar.classList.contains('visible') ? hide() : show();
}
.sidebar {
/* it's a mobile sidebar, blocker and content */
position: fixed;
top: 0;
left: 0;
width: 100vw;
/* to cover the whole screen */
height: 100vh;
padding: 0;
/* to override the default padding */
background: rgba(0, 0, 0, .5);
/* half transparent background */
display: none;
z-index: 99999;
/* to be on top of any other elements */
}
.sidebar.visible {
display: block;
}
/*cover the whole screen and to detect user click on background */
.sidebar .blocker {
position: absolute;
width: 100%;
height: 100%;
}
/* user content */
.sidebar .content {
position: absolute;
top: 0;
left: 0;
background: #FFF;
height: 100%;
width: 250px;
left: -50%;
/* will be animated to left: 0, by animation */
animation: slide 0.5s forwards;
}
#keyframes slide {
100% {
left: 0;
}
}
<div class="sidebar">
<div class="blocker"></div>
<div class="content">
Sidebar Content
</div>
</div>
With the above code, you can have a working sidebar.
Check the working code from stackblitz
https://allenhwkim.medium.com/mobile-friendly-sidebar-in-few-minutes-7817b5c5239f
https://stackblitz.com/edit/medium-sidebar-1-eevvax?file=style.css,index.js
You can't animate between display:block (when .sidebar has .visible applied to it) and display:none (when .visible is removed from .sidebar).
display:none turns off the display of an element so that it has no effect on layout (the document is rendered as though the element did not exist). All descendant elements (i.e. .blocker and .content) also have their display turned off.
The reason you get an animation upon adding .visible is that .sidebar now "exists" and so .sidebar-content also exists and as such animates. As soon as you remove .visible, .sidebar ceases to exist again and so it and its descendants disappear instantaneously.
You are along the right lines using transforms but you need to remove display:none as the method for hiding the sidebar. Something like the below is a good starting point. You may need to change some values to get it looking exactly as you wish. I have added a working codepen to show the result.
.sidebar {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
padding: 0;
background: rgba(0, 0, 0, .5);
z-index: 99999;
transform: translateX(-100%); // new property - will move the element off the left hand side of the screen
transition: transform .5s ease-in-out; // new property - will make the sidebar slide in in a similar manner to your animation
}
.sidebar.visible {
transform: translateX(0); // new property - makes sidebar sit in its natural position (i.e. taking up the whole viewport)
}
.sidebar .blocker {
position: absolute;
width: 100%;
height: 100%;
}
.sidebar .content {
position: absolute;
top: 0;
left: 0;
background: #FFF;
height: 100%;
width: 250px;
}
I looked around what I would like to achieve, but I wasn't able to find any suitable answer.
Basically I can't make the code to correctly detect mouse entering and leaving a div that is overlapping another div.
This is my current situation:
Working demo: http://jsfiddle.net/2f5xx73y/
HTML:
<div style='height: 100%; width: 100%;padding: 30%;'>
<div class='box'>
<div class='inner-box'>Merry xmas!</div>
</div>
<div class='box'>
<div class='inner-box'>Happy new year!</div>
</div>
</div>
CSS:
.box {
height: 100px;
width: 100px;
display: inline-block;
position: relative;
background-color: green;
}
.inner-box {
height: 100%;
width: 100%;
position: absolute;
opacity: 0;
z-index: 1;
}
.zoomed-inner-box {
height: 160%;
width: 160%;
top: -30%;
left: -30%;
position: absolute;
background-color: red;
z-index: 1;
}
JS:
$(".inner-box").mouseenter(function () {
$(this).attr("class", "zoomed-inner-box");
});
$(".inner-box").mouseleave(function () {
$(this).attr("class", "inner-box");
});
As you can see there are two boxes which become bigger when hovered overlapping the other box.
Going right to left everything works fine, in fact the red div goes away as soon as the mouse leave it. This doesn't happen in the opposite direction, where a mouseleave event it's fired as soon as the cursor enters the green div behind the red one, while I want the red div to go away when the mouse completely leave it.
I also tried using the :hover selector for the inner-box class but it has the exact same behaviour. Do you know a nice solution to this problem?
Just change the z-index on .zommed-inner-box to overwrite the .inner-box's z-index. That way the currently hovered box has a higher z-index than .inner-box :
.inner-box {
height: 100%;
width: 100%;
position: absolute;
opacity: 0;
z-index: 1; <---- original z-index
}
.zoomed-inner-box {
height: 160%;
width: 160%;
top: -30%;
left: -30%;
position: absolute;
background-color: red;
z-index: 2; <---- higher z-index
}
FIDDLE
Trying to make this minimal jQuery slideshow (Simple jQuery slideshow using animate()), but how do I make the 3rd and 4th image slide "together" like in the 1st and 2nd image?
http://jsfiddle.net/frank_o/eku4Lwt1/44/
JS:
changeSlide(1, $(".slideshow img"));
function changeSlide(i, items) {
setTimeout(
function()
{
var currentItem = items.eq(i),
prevItem = items.eq(i-1);
prevItem.css("left", -prevItem.width());
currentItem.css("right", 0);
changeSlide(i+1, items);
}, 2000);
}
HTML:
<div class="slideshow" style="height: 100px; width: 200px; overflow: hidden;">
<img src="http://lorempixel.com/200/100" />
<img src="http://lorempixel.com/200/101" />
<img src="http://lorempixel.com/200/102" />
</div>
CSS:
.slideshow {
background: white;
position: relative;
}
.slideshow img {
position: absolute;
top: 0;
right: -200px;
width: 200px;
height: 100px;
-webkit-transition: all 2s ease;
}
.slideshow img:first-child {
left: 0;
}
Ideally they should slide like in this Slick.js example (although I feel Slick is overkill for this job):
http://jsfiddle.net/frank_o/eku4Lwt1/2/
I have changed your code quite a bit: JSFidle
First of all, you should do prevItem.css("right", prevItem.width()); instead of prevItem.css("left", -prevItem.width());. And CSS should be changed like this:
.slideshow img:first-child {
right: 0px;
}
I have also changed the animation to circularly repeat. Dunno if you can use it, otherwise here is what you asked for http://jsfiddle.net/eku4Lwt1/56/
How about this: http://jsfiddle.net/eku4Lwt1/64/
In your JS change this line:
currentItem.css("right", 0);
->
currentItem.css("left", 0);
And in your CSS change the image positioning to left: 200px;:
.slideshow img {
position: absolute;
top: 0;
left: 200px;
}
I'm trying to add an opacity effect with jquery when we past on arrows navigation but it seems that nothing happens :(. Do you know what's wrong with my Jquery script.
Here my Jquery :
$(document).ready(function(){
$(".flscroll").mouseenter(function(){
$("flscroll").animate({opacity:1},300);
});
$(".flscroll").mouseleave(function(){
$(".flscroll").animate({opacity:.8},300);
});
});
I defined my arrows like in my css :
.flscroll {
display:block;
height: 83px;
opacity: 0.8;
position: fixed;
top: 40%;
z-index: 1000;
}
.ie8 .flscroll {
filter: alpha(opacity=80);
}
#flscrollg {
background: url(images/sprite.png) no-repeat 50px -100px;
left: -30px;
padding-left: 50px;
width: 52px;
}
#flscrolld {
background: url(images/sprite.png) no-repeat left -200px;
padding-right: 50px;
right: -30px;
width: 53px;
}
My html arrows declaration is like that :
So I mentioned in the comment that it might be your Jquery missing the fullstop in this line of code
$("flscroll").animate({opacity:1},300);
//Should be
$(".flscroll").animate({opacity:1},300);
I have added it in this FIDDLE and it works fine.
Is this what you are after?
try this
$(document).ready(function(){
$(".flscroll").on('mouseenter',function(){
$(this).animate({opacity:1},300);
}).on('mouseleave',function(){
$(this).animate({opacity:0.8},300);
});
});
I'm trying to replicate the fade in the background image of this site. How would I go about doing so with jQuery?
Use an image as a background image. i.e., <img /> tag. Then use jQuery's .animate() function:
$(document).ready(function(){
$('img.bg').animate({
opacity: 1;
}, 1000);
});
CSS:
.bg {opacity: 0; position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
HTML:
<img src="bgimage.png" class="bg" />
Working demo http://jsfiddle.net/9HTkV/ (and coz I like hulk) :P
Start with opacity 1 and then make it zero as it is fade in.
This should help :)
code
$('.box2').animate({
opacity: 0
});
CSS in start you want Opacity to be 1 and then make it 0.
.box2 {
height: 500px;
width: 700px;
background: #000000;
opacity: 1;
}