How to dynamically change tooltip delay in Bootstrap?
I have div with buttons, when i .mouseenter() on it first time i want a delay of 500ms, but after 500ms i want to change it to 100ms. On .mouseleave() i want it back to 500ms.
Its working but with tooltip('destroy') its killing already shown tooltip.
How to figure it out?
here is fiddle:
https://jsfiddle.net/0nep4tk3/2/
var $btns = $(".buttons").find('button');
$(".buttons").on('mouseenter', function(e){
setTimeout(function(){
setTooltips({show:100, hide:10});
},750);
}).on('mouseleave',function(){
setTooltips({show:500, hide:100});
})
function setTooltips(opt){
$btns.tooltip('destroy');
$btns.tooltip({
trigger:'hover',
delay:{show:opt.show, hide:opt.hide},
container:'body',
});
}
A nice example you can find on https://webflow.com/, in their editor they have very nice tooltips for buttons.
EDIT
I edited fiddle for better ms and feeling what i mean.
So, this is what i got:
I hover BTN1 and after 500ms tooltip will appear but also after 1s i change all tooltip ms ( so i need use 'destroy') and then tooltip for BTN1 which one should still be visible (beouse my mouse is over BTN1 ) will disapear. I want him to stay after tooltips ms change.
I just want to get nice tooltip feeling for buttons.
Without having to destroy and recreate tooltips every time you can edit the delay option.
If i have understood correctly your request, this should do:
var $btns = $(".buttons").find('button');
$btns.tooltip({
trigger:'hover',
delay: {show: 500, hide: 500},
container:'body',
});
$(".buttons").on('mouseenter', function(e){
setTimeout(function(){
console.log("100");
setTooltips({show: 100, hide: 100});
},500);
}).on('mouseleave',function(e){
console.log("500");
setTooltips({show: 500, hide: 500});
});
function setTooltips(opt){
$btns.each(function(){
$(this).data('bs.tooltip').options.delay=opt;
console.log($btns.data('bs.tooltip').options.delay);
})
}
I have left the console.log for testing purposes, you can safely remove them if you don't need them anymore.
If the values i put are incorrect you can easily tweak them but the main logic should be this:
At first, delay is 500ms.
When you mouseenter on the div the delay will be set to 100ms after 500ms
when you mouseover the delay will be back to 500ms
Related
I'm having a problem where I'm making a function in JavaScript (JQuery):
$('.login').click( function() {
$('#login-container').animate({
left: 0
}, 300, "swing", function(){
$('#login-container').animate({
backgroundColor: 'rgba(0,0,0,0.4)'
}, 2000, "swing");
});
});
Whereas "login" is a button and login-container is a big div which contains a form which people can use to login.
I'm trying to make the giant container that slides over the page only turn its background color to lower the website's exposure but it's working and as far as I know, the code is correct.
The first animation happens but the second one (referring to the backgroundColor) doesn't even start at all.
Thanks in advance
EDIT:
I've simplified my code to see if it was a problem of my syntax or JS simply not applying this animation:
$('.login').click( function() {
$('#login-container').animate({
backgroundColor: 'rgba(0,0,0,0.4)'
}, 2000, "swing");
});
And the element does not have its background-color applied, for some reason.
I don't actually get what you're trying to say here, but if you want to toggle that animation you can use $.toggle() of jquery after the user clicks.
If you want to animate this stuff, look at this documentation provided by jQuery
jQuery Animation
I have a list-element that is initially set to max-height: 200px; overflow-y:hidden;. Beneath that element there is a h3-element you can click to show the entire list. For that purpose, I animated the maxHeight-property of the element with the jQuery animate() method. The animation should last 1.2 seconds. After that, the text below the list changes from "show more" to "show less". When you click on it, this animation is reversed, again with a duration of 1.2 seconds, after which the text changes back to "show more".
Everything works fine, except for some unexpected delays: After the first animation which raises the maxHeight-property of the list, it takes another second or so for the text to change as well. Then, if you click the "show less" text, nothing happens for about a seconds before the animation starts.
What is causing these unexpected delays?
JS Fiddle
Edit: As Wa Kei explained, this delay is caused by the "excess" height, since the element is actually less than 1200px high. So how could I rework my function so that it works as intended while not having to use a fixed height value?
I can't use handy jQuery methods like toggle(), show() or hide() because all of those hide an object entirely instead of accepting a minimum and maximum height or something like that.
I'm open to different solutions with JS / JQuery / CSS, but the html structure should remain unchanged.
Here is an example for the first part:
if (!list.hasClass('opened')) {
list.animate({
maxHeight: '1200px'
}, {
duration: 1200,
progress: function(){
if(list.css('maxHeight') > list.css('height')) {
$(this).stop();
}
},
always: function() {
$('#show_more').text('(weniger anzeigen)');
list.addClass('opened');
}
});
}
Edit:
I reworked your code a bit: http://jsfiddle.net/z83cpbvj/1/
#progress (jQuery API) A function to be called after each step of the animation, only once per animated element regardless of the number of animated properties.
#always (jQuery API) A function to be called when the animation completes or stops without completing
I have four images on a page and when I hover over the image, I want a horizontal div to move up on the bar, and when the mouse pointer moves off of the image, I want it to slide back down. Now when I do this is works fine, however there seems to be a delay. Also, if I move back and forth repeatedly, the delay is more and the slider ends up going up and down on its own for a few seconds. Here is the code, please help!
$('.indexgall').on('mouseenter',function()
{
$(this).addClass('hoverimg');
$(this).children().animate(
{
top: 150
}, 600, function()
{
});
});
$('li').on('mouseleave',function()
{
$(this).removeClass('hoverimg');
$(this).children().animate(
{
top:250,
}, 600, function()
{
});
});
From your code, it doesn't look there should be a delay. Can you post a JSFiddle to show this problem in action?
To address the latter concern, you want to be using the JQuery stop() method to stop the animation by cleaning the animation queue.
This can be done, like so:
$(this).stop().animate({
width: 240
}, 500);
Check out this JSFiddle.
When I hover over an img which fades to another img and sroll off too fast, the fadeOut gets stuck and the fade stays. I've tried the .stop() as I've seen in other responses, but still won't work. Is there something else I can put instead of the .stop()?
<div class="grid big-square">
<a href="#"><img id="image2" src="img/fade/creo.png">
<img id="image1" src="img/creo.jpg"></a>
</div>
<script>
$("#image1").mouseenter(function () {
$(this).stop(true, true).fadeOut(1000);
});
$("#image2").mouseleave(function () {
$("#image1").stop(true, true).fadeIn(500);
});
</script>
I seem to remember having a similar problem when I was creating this website.
The solution is to use a combination of .hover() and .stop() to ensure that only one animation is running at a time, which I think you have. Also ensure that the mouseover image is on top of the other image, and just fade that one in and out. The image fading out gets 'stuck' because at some opacity the .mouseleave() stops firing and the .mouseenter() starts firing on the other image.
Something like:
$$ = $("#image1");
$$.hover(function () {
$$.stop().animate({
opacity: 0
}, 1000);
}, function () {
$$.stop().animate({
opacity: 1
}, 1000);
});
#image1 must be above #image2 for this to work, #image1 fades out to 'reveal' #image2 behind it. The code uses .animate() rather than .fadeIn() and .fadeOut() but the effect is the same.
Edit- to fade in another div after the end of the fadeoout animation use the complete call back of the animate function.
Something like:
$$ = $("#image1");
$$.hover(function () {
$$.stop().animate({
opacity: 0
}, 1000);
}, function () {
$$.stop().animate({
opacity: 1
}, 1000, function() {
$("#finalDiv").animate({ opacity: 1, 500 });
});
});
#finalDiv needs to be after the 2 <img />s in your html to appear above them.
I'm not sure how you're trying to accomplish this but I do know how it should be done.
Try this http://jsfiddle.net/xy5dj/
Make sure to listen for both events on the same element (preferably a wrapper element).
Take note that fadeOut actually removes the element from the rendered content (display: none) making sure that the mouse events won't fire on that element.
Side note:
A dirty trick that I used once (if you have to do this then you're doing something wrong) is to clear the style of the element after animation using the callback ability of the animate function i.e.
$('el').animate({opacity:0}, 500, function(){$(this).attr('style', '')});
fiddle
You should use the animation/transition in form:
.fadeTo( duration, opacity, complete )
where complete is callback function.
I am trying to make a div slide down when the mouse moves over another div just above it. Basically the div above it is just the trigger that makes the div slide down. Mouseover of .trigger makes .slidedown expand, and mouseout of .slidedown makes itself slide back up. Here's the code i have so far:
$(document).ready(function() {
$('.slidedown').hide();
//When mouse rolls over
$('.trigger').mouseover(function(){
$('.slidedown').stop().animate({
height: ['toggle', 'swing'],
}, 600, function() {
// Animation complete.
});
});
//When mouse is removed
$('.slidedown').mouseout(function(){
$('.slidedown').stop().animate({
height:'0px'
}, 600, function() {
// Animation complete.
});
});
});
This works, but there are just two teaks i need help with. Firstly, after mouseout and the .slidedown div slides up and disappears, if i then mouse over the .trigger div again, nothing happens. It should make the .slidedown move down again. I need it to every time keep working. I tried removing the .stop() but it still doesn't work.
Also can i make it also slide back up if the mouse moves out of .trigger but only if it isn't moving out of .trigger into .slidedown? This is so incase the user doesn't move the mouse into .slidedown, it would remain forever which isn't good. Or just have a time limit that it can remain expanded if the mouse doesn't move over .slidedown.
Second, is there a way to make a delay of around 1 second between mouseout and the div sliding back up? Thanks for your help!
You might try using the jQuery hover event. For the delay, you can put the closing animation in setTimeout:
$(document).ready( function(){
$('.trigger').hover( function(){ // enter animation
$('.slidedown').stop(true,true).animate({
height: ['toggle', 'swing'],
}, 600, function() { /* animation done */ });
}, function(){ // leave animation
setTimeout( function(){
$('.slidedown').stop(true,true).animate({
height: '0px',
}, 600, function() { /* animation done */ });
}, 1000 );
});
});
You might also look into the hoverIntent plug-in for more nuanced control over the mouseenter/mouseleave behavior, including timing.
I think you'll find that setting a numerical height in $('.trigger').mouseover() may help the animation be repeatable. FYI, you can set an integer number for something like height or width in jQuery and it will automatically set the unit to px for you.
As Ken pointed out, setTimeout is useful for a delay in code, but keep it in your $('.slidedown').mouseout() event or the slideown div will hide after you mouseout of the trigger div instead of when you leave the slidedown div as you specified.