I have an image sprite which, on mouseenter, changes the background position and moves text over. On mouse leave, the background position and text both move to the left to display the original image. The text is a seperate element which comes from the right to sit over the image once the position has changed.
The mouseenter part works perfectly, with the image and text both scrolling to the left at the same time, but on mouseleave, however in chrome (and what appears to be only chrome), the text will move first, then the image will follow later, the image animation is firing much later than the text.
I've read a few issues with .animate() in chrome, but none of the issues seem to be related to this.
Is there anything obviously wrong with this? Or is there simply a better way of doing it
//animation on mouse enter
$("#featuredImage").mouseenter(function(){
$(this).animate({ backgroundPositionX:"100%" });
$("#featuredText").show("slide", { direction: "right" });
});
//animation on mouse leave
$("#featuredImage").mouseleave(function(){
$(this).animate({ backgroundPositionX:"0%" });
$("#featuredText").hide("slide", { direction: "right" });
});
Try hover see If this helps :
$("#featuredImage").hover(function(){
$(this).animate({ backgroundPositionX:"100%"});
$("#featuredText").show("slide" ,{ direction: "right"});
},function(){
$(this).animate({ backgroundPositionX:"0%" });
$("#featuredText").hide("slide",{ direction: "right" });
}
);
Related
I'm trying to show a tooltip whenever the person hovers over an image, I've also made the tooltip follow the mouse, and the tooltip will disappear whenever the person leaves the area where the image is located. This works fine and all, but when I move the cursor to the right when the tooltip is following it, it'll start flickering. I know that the cause of this is because the cursor is leaving the image area and entering the tooltip area for a little amount of time. Got no idea how to fix this. Have a look at my code:
HTML:
<img id="mainImage" src="https://i1.wp.com/historiek.net/wp-content/uploads-phistor1/2015/09/Het-nieuw-logo-van-Google-e1441130561430.jpg?fit=663%2C282&ssl=1">
<div id="toolTip">This is the logo of google</div>
JS:
$('#mainImage').hover (
$('#mainImage').on('mousemove', function(e) {
$('#toolTip').css({
'left' : e.pageX,
'top' : e.pageY,
'display' : 'block'
});
}),
$('#mainImage').on('mouseout', function() {
$('#toolTip').css('display', 'none');
})
);
Thanks in advance.
In your CSS for this page, set pointer-events: none on your tooltip:
#toolTip {
pointer-events: none;
}
This will cause click and hover events to be ignored, so the tooltip will no longer steal the hover event from the element underneath it.
I have a button that slides the background out of view once clicked. I wish to make another button appear that, once clicked, will slide the background back into view.
I have experimented with changing the background position using animate(), but can't figure out what is the best way to move the background image completely in and out of view.
In the code below, I've tried to stay away from using "px" as a unit in order to make sure that the slide works on all screen sizes.
What would be the best way to achieve this effect? Should I use px, vh, or %?
$("#slide").click(function() {
$(".container").delay(100).animate({
'background-position-y': '600%'
}, 800, 'linear');
$(".processHeader").delay(1000).toggle("blind", {
direction: "up"
}, 600);
$(".processContent").delay(2000).toggle("blind", {
direction: "up"
}, 600);
});
$(".next").click(function() {
$(".container").delay(100).animate({
'background-position-y': '-600%'
}, 800, 'linear');
$(".processHeader, .processContent, .step4, .next").delay(200).fadeOut(500);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
You will want to use jQuery(window).width() to determine the screen size, which is cross browser compatible, and pulls the current screen dimensions when it is referenced.
This should work as long as the window is not resized. If you want to also keep the image hidden when resizing occurs, you would nest this in a resize event:
window.onresize = function(event) {
...
};
You should use the top, bottom, left, and right css commands. They can be animated the same way, and are used as reference for a div. For example, giving a div the style top:0;left:0 will anchor it at the top left corner.
You can then animate it to top:100%;left:100% to hide it.
Hiding a background example
So I have some text on a page that is hidden and when I click a button the text is revealed with a "transition.slideDownIn' and when a button is clicked the text is hidden again using a "transition.slideDownOut". The problem is that the reader is left further down the page and I want them to be brought pack up to the parent div of the text which is slid down/up, ideally animated simultaneously with the slideDownOut. I have tried several different things (queues, etc) but I can't seem to figure out what I am doing wrong. Am I approaching to problem incorrectly or misusing the functions?
Below is my most recent attempt.
$read_close.velocity('transition.slideDownOut', 1000, function() {
$('#services').velocity("scroll", {duration:1000, easing: "spring"} );
});
If what you wish to accomplish is simply scroll back up after the transition then do something like:
$read_close.velocity(
'transition.slideDownOut',
{duration: 1000,
complete: function () {
$('#services').velocity('scroll', {duration:1000, easing: "spring"});
}});
Assuming your scroll call is correct.
In a webapp I'm working on, I want to create some slider divs that will move up and down with mouseover & mouseout (respectively.) I currently have it implemented with JQuery's hover() function, by using animate() and reducing/increasing it's top css value as needed. This works fairly well, actually.
The problem is that it tends to get stuck. If you move the mouse over it (especially near the bottom), and quickly remove it, it will slide up & down continuously and won't stop until it's completed 3-5 cycles. To me, it seems that the issue might have to do with one animation starting before another is done (e.g. the two are trying to run, so they slide back and forth.)
Okay, now for the code. Here's the basic JQuery that I'm using:
$('.slider').hover(
/* mouseover */
function(){
$(this).animate({
top : '-=120'
}, 300);
},
/* mouseout*/
function(){
$(this).animate({
top : '+=120'
}, 300);
}
);
I've also recreated the behavior in a JSFiddle.
Any ideas on what's going on? :)
==EDIT== UPDATED JSFiddle
It isn't perfect, but adding .stop(true,true) will prevent most of what you are seeing.
http://jsfiddle.net/W5EsJ/18/
If you hover from bottom up quickly, it will still flicker because you are moving your mouse out of the div causing the mouseout event to fire, animating the div back down.
You can lessen the flicker by reducing the delay, however it will still be present until the delay is 0 (no animation)
Update
I thought about it and realized that there is an obvious solution to this. Hoverintent-like functionality!
http://jsfiddle.net/W5EsJ/20/
$(document).ready(function() {
var timer;
$('.slider').hover(
/* mouseover */
function(){
var self = this;
timer = setTimeout(function(){
$(self).stop(true,true).animate({
top : '-=120'
}, 300).addClass('visible');
},150)
},
/* mouseout*/
function(){
clearTimeout(timer);
$(this).filter(".visible").stop(true,true).animate({
top : '+=120'
}, 300).removeClass("visible");
}
);
});
You could use .stop() and also use the outer container position
$(document).ready(function() {
$('.slider').hover(
/* mouseover */
function(){
$(this).stop().animate({
top : $('.outer').position().top
}, 300);
},
/* mouseout*/
function(){
$(this).stop().animate({
top : $('.outer').position().top + 120
}, 300);
}
);
});
DEMO
Hope this helps
Couldn't reproduce your issue but I believe that hover is getting called multiple times. To work around this you can check if the div is already in animation. If yes, then don't run another animation again.
Add following piece of code to check if the div is already 'animating':
if ($(this).is(':animated')) {
return;
}
Code: http://jsfiddle.net/W5EsJ/2/
Reference:http://api.jquery.com/animated-selector/
I understand the problem and reproduced it, it happens when hovering from the bottom up. The hovering with the mouse is what's causing the problem since the animation function will be called when the mouse hovers over the image. You need to control what happens here by using mouse enter and mouse leave, check out a similar example: Jquery Animate on Hover
The reason it's like that is because the hover is getting queued up causing it to slide up and down multiple times. There's a plug-in called hoverIntent which fixes the issue. http://cherne.net/brian/resources/jquery.hoverIntent.html
If you do decide to use hoverIntent, the only thing you have to change in your code is .hover > .hoverIntent
I'm trying to animate the opacity. Default opacity is 0.8 for all thumbnails. Once hovered, the opacity increases to 1 and should go back to 0.8 when another thumbnail is hovered.
I've tried this code:
container.delegate("a:has(img)", "mouseenter", function(e){
$(e.currentTarget).stop(true, true).animate({opacity: 1}, options.thumbsopacityFadeTime);
}).delegate("a:has(img)", "mouseout", function(e){
$(e.currentTarget).stop(false, true).animate({opacity: options.thumbsOpacity}, options.thumbsopacityFadeTime);
);
but the hovered thumbnails sometimes (most of the time) goes back to the default opacity, even when the mouse is still over that same thumbnail and hasn't moved.
I assume this has something to do with the animations currently running and what not, but I thought $(e.currentTarget) would only apply to this 1 thumbnail, so why would a mouse out event be triggered for that thumbnail when I do not leave the thumbnail?
Any ideas on how to fix this?
Thanks,
Wesley
Did I understand you that you don't want to have mouseout effect? Only when hovering different thumbnail?
FIrst attempt should be replacing "mouseout" to "mouseleave". If it doesn't help, try different way:
var obj = container.find("a:has(img)");
obj.bind({
mouseenter:function(){
obj.stop().not(this).animate({opacity: options.thumbsopacity}, options.thumbsopacityFadeTime);
$(this).animate({opacity: 1}, options.thumbsopacityFadeTime);
},
mouseleave:function(){
// nothing :)
}
});