I've got a project where i've overlaid two imaged and have the top image fade out using a toggleFade function, when the user clicks a toggler (checkbox). it works well, except that to get the images to function correctly the bottom image is set to position:absolute. Of course, when the toggleFade() happens, the absolute positioning means all the lower divs float up.
$(document).ready(function(){
$('.lights').on('click', function (){
$('.day').fadeToggle(3000);
setTimeout(function() {$('.night').css('position: absolute');}, 3000);
});
});
is there any way to prevent this from happening? i've tried setTimeout for the lower div, but that didn't work.
here's the jsFiddle of my project:
https://jsfiddle.net/jsieb81/oue2fnr0/
You can add a class on click event and manage opacity in css with a transition. Like this :
(You don't need jQuery)
document.querySelector('.lights').addEventListener('click',function(){
document.querySelector('.day').classList.add('hide');
});
.hide {
opacity: 0;
-webkit-transition: opacity 3s;
transition: opacity 3s;
}
see this fiddle https://jsfiddle.net/oue2fnr0/9/
Related
Now i am officially desperated. I bought a Script to use a MegaMenu on my Site.
The Script is MegaNavBar 2.2
http://preview.codecanyon.net/item/meganavbar-v-220-advanced-mega-menu-for-bootstrap-30/full_screen_preview/8516895?_ga=2.119686542.744579007.1495443523-2131821405.1495443282
I wanted the script to open the submenus on hover, so i configured it as described on the Demo-Page (see above).
This worked fine. But i wanted to add a delay, because its irritating users, if they move the mouse pointer from top to bottom, and everytime the menu is open immediately while hovering.
What i tried:
Asking the support - No Answer
Trying to add an animation and animation-delay
The Animation is working, but the delay is not working, i assume because of the "display:block"
Trying to add an transition
The Transition is not working, because Transition is not working with "display:block".
Is there anybody out there, who can help me with this stuff?
Here is my Bootply:
https://www.bootply.com/A50M0Wk9NK
(The assumed css rule is in line 29 of pasted css-code)
Best Regards,
Michael
You can try to use Visibility instead of Display, and thus use transitions.
e.g.:
div > ul {
visibility: hidden;
opacity: 0;
transition: visibility 0s, opacity 0.5s linear;
}
div:hover > ul {
visibility: visible;
opacity: 1;
transition-delay:2s; //set delay here
}
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();
});
more precisely, I've seen websites where there's a kind of header image, which loops through 3-4 different images, and each image is referenced by a dot, and you can pick the image you want by clicking the dot as well. I'm sure everyone has seen this somewhere.
as an example, go to http://www.tsunamitsolutions.com/
my question is, how do I make these dots appear/disappear when I hover on the image (like on the site I shared above) is it javascript or can this be accomplished just in the CSS with the "hover" style.
In other words, can hovering over one html portion/div/section make another div/section appear/disappear just by using CSS?
It can be done in the CSS.
Assuming the dots/arrows are child elements of banner container, you can do something like:
.bannerContainerClass .dotClass {
display: none;
}
.bannerContainerClass:hover .dotClass {
display: block;
}
You can also do it in jQuery if you need effects like fade:
$(".bannerContainerClass").hover(function() {
$(this).children(".dotClass").fadeIn(500);
}, function() {
$(this).children(".dotClass").fadeOut(500);
});
The jQuery method can be modified to work even if the dots aren't children of banner container.
You can accomplish it using Jquery and javascript. As in any website header images there is a tag for image one tag for collection of those points.
Suppose.
<div id="header_image">
..code for header image..
</div>
which is header tag. and there is a tag which cointains the points.
<div id="points_container">
..code for points...
</div>
Now in its javascript code if you want to disappear "points_container" tag when mouse is hovered over "header_image".and appears again when mouse is hovered out, you can write in its Javascript code.
$(document).ready(function(){
$("#header_image").hover(function(){
$("#points_container").hide();
},function(){
$("points_container").show();
});
});
You can use css on hover with either the visibility attribute or opacity attribute to hide an object, the full implementation of a gallery widget like this is somewhat more complicated though. CSS solution:
.dots:hover
{
opacity:0;
}
Makes anything with the dots class invisible on mouse over.
Or if you don't want it to take up any space when invisible:
.dots:hover
{
display:none;
}
Try this with simple CSS transitions, like this
HTML
<div id="parent"><br/><span class="bullets">* * * *</span></div>
CSS
.bullets{
opacity:1;
}
#parent:hover > .bullets{
opacity:0;
transition: opacity .2s ease-out;
-moz-transition: opacity .2s ease-out;
-webkit-transition: opacity .2s ease-out;
-o-transition: opacity .2s ease-out;
}
FIDDLE HERE>>
I am getting issue with jquery toggle function.
Bellow i have attached link for demo...
jsfiddle link
jquery code -
$(document).ready(function(){
$('.collapsBTN').toggle(
function () {
$(".rhs_container").css({'display':'none'});
$('.rhs').animate({width: "20"});
},
function () {
$(".rhs_container").css({'display':'block'});
$('.rhs').animate({width: "295"});
}
);
});
Issue -
If we click on collaps button (in pink color as shown in above given link), toggle function works fine but button gets disappeared while animating width. It should be vissible with animation.
Can any one solve this?
The problem is, while jQuery animates over width, it makes overflow:hidden style. This one works, though:
jsfiddle
If you are using html 5 and css3 then follwoings would be better approach :
<script>
$('.collapsBTN').click(function () {
$('.rhs_container).toggleClass('change-size');
});
</script>
<style>
.rhs{
-webkit-transition: width 1.5s linear ;
-moz-transition: width 1.5s linear ;
transition: width 1.5s linear ;
}
.change-size {
width: 20px;
}
.change-size .rhs_container{
display:none;
}
otherwise please check simple solution with jquery jsfiddle link
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/