Why doesn't this div fade out slowly? - javascript

I have created a fiddle.
The modal fades in but not out, I've noticed if I add another css class
.out { opacity: 0 !important; }
and add that (rather than remove .in) it works. Why is this?

You need to add a default height attribute to the .fade class. Currently, when the .in class gets removed, the modal immediately loses it's height before the fade out animation

Related

How to trigger some javascript before CSS transition?

I have an element whose width increases when another element beside it is hovered over, i.e.
.div2 {
width: 0px;
display: none;
transition: width 2s;
}
.div1:hover ~ .div2 {
width: 100px;
}
I want to change the display to block on mouseover, but before the CSS transition. Then, similarly, I want to change the display back to none after the CSS transition finishes. I tried using .onmouseover to set the display to block, but it set it after the CSS transition.
Is there any way to set the display to block before the CSS transition?
As I understood your question, You can have two classes one for hidden (display :none) and another for visuallyHidden (may be visibility : hidden). On hover use visualy hidden class to get the css transition in effect(take help of JavaScript to add this class). You must take a help of setTimeout here (10 Ms ) should be fine to add another class which actually implements css transition. when it is un hovered you need to recycle logic again. hope it helps

APPLIED a CSS style after adding a class to an element via classList.toggle("element")

I try to make a hamburger menu but I struggle to get it working properly.
My starting point is this animation https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_menu_icon_js and in a first time I just want to add a behavior : set opacity: 0; to another div (the content of the menu).
I thought adding the class="change" to this div and the proper CSS rules could make the job but despite the class being applied, only the "menu button" take the new CSS, not the content div. Is anybody know what missed ?
Here is a codepen of what I did : https://codepen.io/anon/pen/pBBNaV
.change .overlay-content {
opacity: 0;
}
Thank you for your time !
I think your issue is your css select for the div that you want to fade.
You have: .change .overlay-content which will find a an element with class overlay-content inside an element with class change.
What you need is .change.overlay-content (notice the removed space) which finds an element with both the classes change and overlay-content.
https://codepen.io/anon/pen/eooggO

Fading div in and out on center slider item

I'm trying to fade a div in/out on a center slider item.
I'm using owl-slider, the center slide/item gets assigned the class .center by the slider.
Each slide has a div called Age, and I'm trying to make it so this Age div is hidden on all slides which don't have the .center class, and it fades in on the center slide.
The center slide is navigated by the owl-prev/owl-next controls, so this is what I was thinking to trigger the change.
Is it a more efficient way to do this?
Example:
The issue I'm having is how to test for the presence of the .center class on document load, and also how to initially set the Age div not visible on load also.
I've tried $(".item-age").hide(); and it works, but when I click the next control all Age divs appear, not just the one associated with .center.
This is what I'm trying: `
$(".owl-next").click(function(){
if ($('.owl-item').hasClass('center')){
$('.item-age').fadeIn();
}
});`
I think the best way is to use CSS with Transitions.
Define the two states for the age div:
.age {
opacity: 0; /* transparent = invisible */
}
.center .age {
opacity: 1; /* opaque = visible */
}
This already does the trick for hiding/showing the age div. To get the fading effekt, add css transition properties:
.age {
opacity: 0; /* transparent = invisible */
transition: opacity 1s; /* fade out transition */
}
.center .age {
opacity: 1; /* opaque = visible */
transition: opacity 500ms; /* fade in transition */
}
The transition is always defined in the target state of the transition. To get a better understanding of the transition-property refer to this MDN article.
I think you are trying to do something like this
$(".next").click(function(){
if ($('.sliderItem').hasClass('center')){
$('.age').fadeIn();
}
});
You can use the .fadeIn() function on the element that has the .center class directly by changing your selector target to .owl-item.center.
Try changing your code to:
$(".owl-next").click(function () {
$('.owl-item.center .item-age').fadeIn();
});

make a tag not effected by a body class

So I have set my body width to 600px so when moused outside of the body, the body turns to an opacity of 0.25. I have that setting being applied directly to the body tag by jquery adding a class to it and when the body is moused over, the class (opac) is removed. when moused out of, i want buttons that have a fixed position outside of the body that previously had the opac class applied to it, not be affected by it any more. the buttons will be brought up to an opacity of 1 (which if i am not mistaken, is the normal setting for items so they are fully in view). currently, when the body is moused over, the buttons do have a opacity of 0.25 but when the body is moused out of, the buttons stay the same opacity and when the buttons are moused over, it brings both the body and buttons to an opacity of 1.
The elements inside the body will inherit the 0.25 opacity of their parent (<body>in this case, ). Your best bet is instead to use a structure like the following:
<body>
<div class="container">
...
</div>
<div class="buttons">
...
</div>
</body>
And now you can apply the opacity on :hover to .container and position the buttons in .buttons accordingly.
Do not use opacity for this.
If you set opacity to mother element, all child elements will retake this setup.
Use RGBa for colors and prefer :hover selector instead of jquery.

jQuery Mouseenter and mouseleave actions

I am using the following jQuery script:
$("#divid").mouseenter(function() {
$('#divid').show(1000);
}).mouseleave(function() {
$('#divid').hide(1000);
});
$("#hldiv").mouseenter(function() {
$('#divid').show(1000);
}).mouseleave(function() {
$('#divid').hide(1000);
});
As you can see, when the mouse hovers over a hyperlink called #hldiv, the #divid should be shown. The main goal is to keep the DIV shown if the mouse is over the DIV - but the #divid should not be visible initially.
If the mouse moves over the hyperlink, the DIV should appear, and when the mouse then moves over the DIV, it should stay until the mouse leaves.
The problem is that with my current code, when the user moves over the hyperlink and then out - the DIV appears/disappears correctly, but when the user moves out of the hyperlink and over the DIV itself, the DIV also disappears.
How should I fix this?
Why don't you add a container and do:
<div id='container'>
<a ID="hlDiv">hlink</a>
<div ID="divId">Test Test Test</div>
</div>
$(document).ready(function() {
$("#hlDiv").hover(function() {
$('#divId').show(1000);
})
$('#container').mouseleave(function(){
$('#divId').hide(1000);
});
});
fiddle here: http://jsfiddle.net/w68YX/8/
If I understood right, rewriting
$("#divid").mouseenter(function() {
$('#divid').stop(true);
$('#divid').show(1000);
}).mouseleave(function() {
$('#divid').hide(1000);
});
Might help, since it stops the current animation (fading out) and fades it back in (if it has already turned a bit transparent).
However this depends on your HTML, and might not work in your case, so please post the structure also.
I am very late to this party - but there is a far better way to do this, so I want to add it for the sake of future browsers. You don't need jQuery for this effect at all.
First, wrap the two items in a container (here I'm using a div with class container), and apply a class to the item you want to appear/disappear on hove (here I'm using the show-on-hover class on the #divId element)
<div class="container">
<a id="hlDiv" href="...">link text</a>
<div class="show-on-hover" id="divId">popup stuff</div>
</div>
Next, set up your CSS as follows:
.container > .show-on-hover { display: none; }
.container:hover > .show-on-hover { display: block; }
#divId { /* whatever styles you want */ }
The effect is that the hover is now controlled entirely by CSS - but, it doesn't have the 1s transition you originally had. This is a little more complicated (and currently doesn't work in IE - but will be supported as of IE10).
Simply change the CSS as follows:
.container { position: relative; }
.container > .show-on-hover { opacity: 0.0; position: absolute; }
.container:hover > .show-on-hover { opacity: 1.0; }
.show-on-hover {
-webkit-transition: opacity 1s; /* Chrome / Safari */
-moz-transition: opacity 1s; /* Firefox */
-o-transition: opacity 1s; /* Opera */
}
The relative positioning on the .container means that the container sets its own bounding boxes for its child elements and their positioning. This means that when you then set the > .show-on-hover styling to position: absolute;, it will still be constrained to its parent (if you set left: 0; as an example, it will move to the left edge of the .container, rather than the screen).
The opacity toggle now simply makes the absolutely positioned item show/disappear wherever you've placed it (and you would update the CSS to put it exactly where you want, relative to the hyperlink). Because we're no longer using display: none - the DIV will always take up space on the screen - even when hidden (which is probably not what you want).
Finally - the last block, which sets transitions, tells modern browsers that whenever the opacity changes on elements of class .show-on-hover, make that change happen as a tween over 1s of duration.
Here is a jsFiddle showing the transitions: http://jsfiddle.net/TroyAlford/nHrXK/2
And here is a jsFiddle showing just the toggle: http://jsfiddle.net/TroyAlford/nHrXK/3/

Categories

Resources