I have a div to animate from the top to the bottom of another div. I'm currently playing w/ mouseenter/leave and JS animations w/ easing where its original state is up/top. I want to hover/mouseenter and have it move down and stay down if I mouseleave/hover off. When I hover again it will animate back to the top/start.
I initially used mouseenter/leave which obviously doesn't do what I need as I would like the state to remain the same upon mouseleave. So what function would be best for this need? I'm still learning the terminology and am stumbling over how to better phrase the question.
Code:
function init() {
mouseenter: function(){
$(".ltrP").stop(true, true).animate({
marginTop:"170px"
},
{
duration: 1000,
easing: "easeOutBounce"
});
},
mouseleave: function(){
$(".ltrP").stop(true, true).animate({
marginTop: "0px"
},
{
duration: 1000,
easing: "easeInBounce"
});
}
});
}
window.onload = init;
I've edited your piece of code, see the comments for explanation:
$(document).ready(function(){ // Runs when document is loaded
$(".ltrP").mouseenter(function(){ // Mouseenter event on the given object (.ltrP)
var goTo = $(this).css("marginTop") == '0px' ? 170 : 0; // When the current margin-top is 0px animate to 170px, otherwise animate it back to 0px
$(this).stop(true,false).animate({ // Changed the stop(true, true) to stop(true, false), looks nicer in my opinion
marginTop: goTo // Animate to the just set variable
}, 1000);
});
});
And see here a demo: http://jsfiddle.net/hnDmt/
(And the easing "easeInBounce" was not working for me, so I removed it. (Maybe a jQuery UI easing?))
You can rewrite your code this way:
$(document).ready(function(){
init();
});
function init() {
$.hover(function(){
$(".ltrP").stop(true, true).animate({
marginTop:"170px"
},
{
duration: 1000,
easing: "easeOutBounce"
});
},
function(){
$(".ltrP").stop(true, true).animate({
marginTop: "0px"
},
{
duration: 1000,
easing: "easeInBounce"
});
});
}
There are lots of ways to do this. Maybe the easiest to to conceptualize is by adding a class to the animated item. You want to write two separate mouseenter functions.
For the first function, trigger your down animation, and add a class to the entered item. Call the class "moveddown" or something obvious.
Then, write a second mouseenter function. When an item with the class is mousentered, animate it up, and remove the class.
Forget about jQuery hover for this. It's just a wrapper for mouseenter/mouseleave. It can cause problems. The jQuery docs warn about it. It's usually better to write mouseenter and mouseleave functions separately, especially when you're trying to do something tricky, like this.
Related
I'm using blast.js and my hover effect triggers when you move the mouse over the element and when you move it out of the element. I want it to behave like a normal hover effect. I know that the hover effect usually is set up like:
$('h1').hover(function(){
//code here
}, function(){
//code here
});
but I'm not sure what I would put in the second function when using blast.js, to prevent it from happening twice.
I have a fiddle, but I don't know how to make blast work on the fiddle.
DEMO
$(function() {
$('h1').hover(function() {
// Blasts the title
var chars = $('h1').blast({
delimiter: 'word'
});
// Animation character per character
chars.each(function(i) {
// Initialization of the position
$(this).css({
position: 'relative',
left: 0
}).delay(i * 45).animate({
left: '50px'
}, 300).delay(200).animate({
left: 0
}, 300);
});
});
});
You can use .mouseover() for when the cursor enters the object and .mouseout() for when the cursor leaves the object.
These are JQuery functions based on HTML events. There are also other events like mouseenter and mouseleave, you can find them in W3Schools.
You should add param to your function:
$('h1').hover(function(e) { ... });
and call inside of the body:
e.preventDefault();
I'm writing some code with jQuery.
There are some div with class 'icon' in my html, and I hide a div with class 'hide' beside each 'icon'.
I want that when user's mouse get in to 'icon', the corresponding 'hide' will make animate.
But I found that if I quickly move the mouse in and out the 'icon'. The animate will excute twice. And it make my web's visual effects very terrible.
So I want stop the event while animate excuting, I read a lot of artical and document then try, but still can't solve it.
This is my code.
$(".icon").on("mouseenter", function(){
$(this).closest(".slideli").find(".hide").show("slide", {direction: 'right'}).animate({duration: 500, easing: "swing", queue: false});
});
$(".icon").on("mouseleave", function(){
$(this).closest(".slideli").find(".hide").hide("slide", {direction: 'right'}).animate({duration: 500, easing: "swing", queue: false});
});
To avoid event to be fired on animated element(s), you should use pseudo selector :animated as following: :not(:animated)
$(".icon").on("mouseenter", function(){
$(this).closest(".slideli").find(".hide").filter(":not(:animated)").show("slide", {direction: 'right'}).animate({duration: 500, easing: "swing", queue: false});
});
$(".icon").on("mouseleave", function(){
$(this).closest(".slideli").find(".hide").filter(":not(:animated)").hide("slide", {direction: 'right'}).animate({duration: 500, easing: "swing", queue: false});
});
You should use jQuery's .stop() to prevent new animations from being added to the queue all the time. You can either use .stop(true,true) or .stop(true,false) depending on your need:
if you only want to clear the animation queue and let it animate to completion by itself, use .stop(true,false)
if you want to clear the animation queue and force the animation to jump to its end state immediately, use .stop(true,true)
Here's your improved code:
$(".icon").on("mouseenter", function(){
$(this)
.closest(".slideli")
.find(".hide")
.stop(true,true)
.show("slide", {direction: 'right'})
.animate({duration: 500, easing: "swing", queue: false});
});
$(".icon").on("mouseleave", function(){
$(this)
.closest(".slideli")
.find(".hide")
.stop(true,true)
.hide("slide", {direction: 'right'})
.animate({duration: 500, easing: "swing", queue: false});
});
You may also use .finish(), but since your animation is rather simple (you are not chaining consecutive animations in any instances), .stop() can do the same job, too.
p/s: A shameless plug to a quick article on handling jQuery animations I published some time ago: How to .stop() writing bad jQuery animations
I would like to have an image of an arrow pulsating, when the user clicks the arrow a div slides down and the pulsating arrow animation stops. When the user clicks the arrow again the div slides up and the arrow continues to pulsate.
I can toggle. I can pulse. However, I am unsure how to go about toggling a pulsating animation. If someone could point me in the right direction that would be great!
Many thanks.
$(document).ready(function(){
{
$(".arrow_down_grey").effect( "pulsate",
{times:5}, 3000 );
}
$('.arrow_down_grey').click(function(){
$(".arrow_down_grey").stop().effect();
$(".hiddenDiv").slideToggle();
});
});
jQuery has a .stop() method that halts animations. You would need to listen for clicks, and then start/stop the animation accordingly using .stop(). I'm thinking you would need to use the true flag to clear your animation queue, so the stop doesn't just "pause" the animation, but that's up to you. You would then use a closure to keep track of the "toggle status" and start the animation back up when your div is toggled the other way.
$('#animation').stop(false);
jQuery .stop documentation: http://api.jquery.com/stop/
$(document).ready(function() {
function pulsate() {
$(".pulsate").animate({ opacity: 0.2 }, 1200, 'linear')
.animate({ opacity: 1 }, 1200, 'linear', pulsate)
.click(function() {
$(this).animate({ opacity: 1 }, 1200, 'linear');
$(this).stop();
});
}
pulsate();
});
This code works but how would you start the pulse animation again?
I want to create a mouse rollover effect, like we used to see in flash websites - when the mouse rolls over an element it begins to animate, but if in the middle of the anim the mouse rolls out the animation would stop and run back.
I would like to achieve the same effect with fabric, but I can seem to find a way to stop the animation. For example:
rect.animate('top', '200', {
duration: 1000,
onChange: canvas.renderAll.bind(canvas),
onComplete: function() {
//callback code goes here
}
});
This will animate until the top value of the rect will become 200. Is there a way to stop animation before that?
You need to specify abort function.
rect.animate('top', '200', {
duration: 1000,
onChange: canvas.renderAll.bind(canvas),
onComplete: function() {
//callback code goes here
},
abort: function(){
return someConditionWhichAbortsAnimationWhenItsTrue;
}
});
The only problem is that abort was not passed in to the underlying fabric.util.animate, which I just fixed, so you'll need to use latest version :)
After having troubles with a jquery fisheye plugin I've decided to develop a similiar script by myself. (It's also a good practice).
Anyway , I wrote 2 jquery functions based on the Animate() function.
minimizeBubble
return the bubble to its default size
maximizeBubble
make the bubble bigger , higher and display another picture as well (a
title for that bubble)
jQuery.fn.maximizeBubble = function(){
$(this).animate({
marginTop: '-300px',
width: '300px',
}, {
duration: 200,
specialEasing: {
width: 'linear',
},
complete: function() {
$(this).find("span").css("display" , "inline");
}
});
}
jQuery.fn.minimizeBubble = function(){
$(this).animate({
//top: '+=5',
marginTop: '0',
width: '80px',
}, {
duration: 100,
specialEasing: {
width: 'linear',
},
complete: function() {
$(this).find("span").css("display" , "none");
}
});
}
I also wrote the next code:
I know that the .each() function in this case is not neccessery because
there's only one big bubble at a time.
$(document).ready(function() {
//First , the middle one will be big as default.
$('#auto_big').maximizeBubble();
//mouseOver - make it big , onMouseout - Stay Big (do nothing)
$('.dock-item2').mouseover(function() {
//mouseOver on another bubble- minimize the other one and maximize the current
$('.dock-item2').each(function(){
$(this).minimizeBubble();
});
$(this).maximizeBubble();
});
});
(A jsFiffle for my code: http://jsfiddle.net/T7gCL/1/)
The problem , as you can see at: http://jsfiddle.net/T7gCL/1/embedded/result/ that
when you move your mouse to the next bubble , all the bubbles are starting to "get crazy".
1.Do you know what's the reason for this behaviour?
2.How can I solve it?
3.do you have any suggestions of how to improve my code (for instance: instead of each())?
Part of the reason there is so much hopping around is that you're positioning the images absolutely and then resizing them. I'm not sure what the application calls for but I would try floating them for now. The animation behavior is like a chain reaction which makes me draw the hypothesis that when the image resizes it is propagating the onMouseover event to the images it is overlapping. The floating layout may fix this.
Update
This works better but might not be exactly what you're trying to do
$('.dock-item2').mouseenter(function(event) {
event.stopPropagation()
$(this).maximizeBubble();
});
$('.dock-item2').mouseleave(function(event) {
event.stopPropagation()
$(this).minimizeBubble();
});
You still need to rework the way you're organizing the images in their containing div