Mootools: How to get morpha.start() after 2sec mouseenter?
window.addEvent('domready',function() {
var morph = new Fx.Morph('resize',{duration:700,delay:400});
$$('#resize').addEvent('mouseenter',function(e){
e.stop();
morpha.start({
width: '200px',
height: '100px'
});
}//It does not work on adding ',2000' here
);
<div id="resize" class="resize">DIV will get bigger after 2sec on mouseenter</div>
use delay.
http://www.jsfiddle.net/dimitar/m6JKt/ example
document.id('resize').set("morph", {duration:700,delay:400}).addEvents({
mouseenter: function(){
this.store("timer", (function() {
this.morph({
width: '200px',
height: '100px'
});
}).delay(2000, this));
},
mouseleave: function() {
$clear(this.retrieve("timer"));
}
});
this has also been refactored to use element.morph which does the class instance for you - and it will cancel the transition if you mouseout within the 2 seconds starting period grace.
Related
Hi I'm currently stuck on a problem
I have a picture where i want it to animate as well as start a sound clip. So far, the picture gets animated, but the music won't start.
This is my javascript:
$(document).ready(function() {
$(document).ready(function() {
$("img").click(function() {
$(this).animate({
height: '150px',
width: '150px'
});
function play_single_sound() {
document.getElementById('audiotag1').play();
};
});
});
});
This is my index.html where info about my audio ID is:
<audio id="audiotag1" src="tailtoddle_lo.mp3" preload="auto"></audio>
Assuming your jQuery is set up correctly, you likely want the following
remove the nested document.ready
actually call the function inside the click
Like this
$(function(){
// tilknyt klik-funktion til alle IMG tags
$("img").click(function(){
$('#audiotag1').play();
$(this).animate({
height: '150px',
width: '150px'
});
});
});
or this
function play_single_sound() {
document.getElementById('audiotag1').play();
}
$(function(){
// tilknyt klik-funktion til alle IMG tags
$("img").click(function(){
play_single_sound();
$(this).animate({
height: '150px',
width: '150px'
});
});
});
You need to call the function play_single_sound in img click handler as of now you are only defining the function. Also you only need to use one document-ready handler.
play_single_sound();
Complete Code
$(document).ready(function() {
$("img").click(function() {
$(this).animate({
height: '150px',
width: '150px'
});
//Call the function here
play_single_sound();
});
//Define it outside the click handler
function play_single_sound() {
document.getElementById('audiotag1').play();
}
});
If I mouseover/mouseout very fast more than one time during animation times (here 900). Button is animating more than one time; even when I stopped mouse activity.
I want that it will take only one event for animation during animation times; even when multiple event triggered.
Other way I want to say if I triggered multiple mouseover event during 900 it will terminate immediately when I triggered mouseout and vice-versa.
$(document).ready(function () {
$("button").mouseover(function () {
$(this).css({
background: 'transparent',
color: '#09F'
});
$("button").animate({
width: "110%",
}, 900);
$(this).text("Show More >");
});
$("button").mouseout(function () {
$(this).css({
background: '#09F',
color: '#FFF'
});
$("button").animate({
width: "100%",
}, 900);
$(this).text("Show More");
});
});
Here's an JSFiddle to show you the behaviour
You need to use .stop()
Stop the currently-running animation on the matched elements.
Use
$(document).ready(function () {
$("button").mouseover(function () {
$(this).css({
background: 'transparent',
color: '#09F'
});
$("button").stop().animate({ //Here used stop
width: "110%",
}, 900);
$(this).text("Show More >");
});
$("button").mouseout(function () {
$(this).css({
background: '#09F',
color: '#FFF'
});
$("button").stop().animate({ //Here used stop
width: "100%",
}, 900);
$(this).text("Show More");
});
});
DEMO
Yes every time because you have some duration for example
$('somelemenent').animate({}, 400);
Your animation will stay in order if you hover element more quickly than your duration.
For this cases, you should set:
$('somelement').stop().animate(/* and your properties */);
Method .stop() stops all effects and orders which have connection with current element.
Use this : add another event after finishing previous one.
$(document).ready(function(){
$("button").mouseover(function() {
$( this ).css({background :'transparent',color : '#09F'});
$( "button").stop().animate({width: "110%",}, 900 );
$(this).text("Show More >");
}).mouseout(function() {
$( this ).css({background :'#09F',color : '#FFF'});
$( "button").stop().animate({width: "100%",}, 900 );
$(this).text("Show More");
});
});
I have some DIVs for products, and I have:
// mouseenter
$(document).on('mouseenter', '.productWrapper', function(){
$(this).stop(true,true);
$(this).find('.productWrapperContentVisible').animate({
height: '100px',
opacity: '1',
}, function(){
$(this).find('.productWrapperPrice').fadeIn();
$(this).find('.productWrapperByCompany').fadeIn();
});
});
// mouseleave
$(document).on('mouseleave', '.productWrapper', function(){
$(this).stop(true,true);
$(this).find('.productWrapperPrice').fadeOut('fast');
$(this).find('.productWrapperByCompany').fadeOut('fast');
$(this).find('.productWrapperContentVisible').animate({
height: '40px',
opacity: '.8',
});
});
and there are about 20 of products in each page, while I'm using stop(true,true), after I move my mouse on many of them many times, this doesn't work right, they continue to change height, and sometimes productWrapperPrice is still there while I don't have my mouse over there, it should go hidden.. .
sample: http://jsfiddle.net/gwsPB/
What's wrong with my code?
Thanks
Try this:
// mouseenter
$(document).on('mouseenter', '.productWrapper', function () {
$(this).find('.productWrapperContentVisible').stop(true, false).animate({
height: '100px',
opacity: '1'
}, function () {
$(this).find('.productWrapperPrice, .productWrapperByCompany').stop(true, true).fadeIn();
});
}).on('mouseleave', '.productWrapper', function () {
var $this = $(this);
$this.find('.productWrapperPrice, .productWrapperByCompany').stop(true, true).fadeOut('fast');
$this.find('.productWrapperContentVisible').stop(true, false).animate({
height: '40px',
opacity: '.8'
});
});
DEMO
The problem is: when you mouseenter and mouseleave immediately fast enough, your animate function in the mouseenter event is not finished yet. When your call $this.find('.productWrapperContentVisible').stop(true, true), the animation is stopped but the callback function is called which display them again
function () {
$(this).find('.productWrapperPrice, .productWrapperByCompany')
.stop(true, true).fadeIn();
}
By using stop(true, false), the callbacks are not called.
You need to call stop() on elements where are being animated, calling it on an ancestor element has no effect.
// mouseenter
$(document).on('mouseenter', '.productWrapper', function () {
$(this).find('.productWrapperContentVisible').stop(true, true).animate({
height: '100px',
opacity: '1'
}, function () {
$(this).find('.productWrapperPrice, .productWrapperByCompany').stop(true, true).fadeIn();
});
}).on('mouseleave', '.productWrapper', function () {
var $this = $(this);
$this.find('.productWrapperPrice, .productWrapperByCompany').stop(true, true).fadeOut('fast');
$this.find('.productWrapperContentVisible').stop(true, true).animate({
height: '40px',
opacity: '.8'
});
});
I'm trying to get a nice animation with jQuery. I came up with that code:
$(document).ready(function () {
$('#arrow_up').hide();
$('#arrow_down').bind({
mouseenter: function() {
$('#content')
.animate({
height: '110px'},
300);
},
mouseleave: function() {
$('#content')
.animate({
height: '100px'},
300);
}})
.click(function() {
$(this)
.fadeOut( 1000 )
.unbind('mouseenter')
.unbind('mouseleave');
$('#content')
.animate({
height: '300px'},
500);
$('#arrow_up')
.delay(1000)
.fadeIn( 2000 );
});
$('#arrow_up').bind({
mouseenter: function() {
$('#content')
.animate({
height: '290px'},
300);
},
mouseleave: function() {
$('#content')
.animate({
height: '300px'},
300);
}})
.click(function() {
$(this)
.fadeOut( 1000 )
.unbind('mouseenter')
.unbind('mouseleave');
$('#content')
.animate({
height: '100px'},
500);
$('#arrow_down')
.delay(1000)
.fadeIn( 2000 );
});
});
It is working nicely, but only the first time. You can check it here: http://www.cow-art.eu/test/index.html
I want to animate the content div on hovering an arrow below. After clicking it I want to slide it down to full size and after the next click - to hide it partially. You can check it on the link provided above. It's working fine, but the arrow hovering animation is working unless I show and hide the content. The second approach is not animating it as the first.
I assume it's because the clicking event is unbinding the mouseenter and mouseleave, and there is no other event what can bind it again.
I ran out of ideas how to fix it. Can you please help me with that one?
I have a binding that I want to control a bit better.. Here's the code first off:
$('#topnav').bind({
mouseenter: function() {
$("#topnav").animate({opacity: 1.0, width: '98%', height: '38px'});
},
mouseleave: function() {
$("#topnav").delay(2000).animate({opacity: 0.9, width: '310px', height: '33px'});
}
});
Currently you see I am delaying the mouseleave because the navbar the person is "mouseenter-ing" is very small, and if the mouse happens to leave for a split second, it triggers the mouseleave event. I want to control that a bit better. I want some type of if statement that says "if the mouse leaves the #topnav div for less than three seconds and re-enters, pretend the mouse never even left"
If this does not make sense I will clarify.
Thanks!
You could achieve this with setTimeout() and clearTimeout():
var tout;
$('#topnav').bind({
mouseenter: function() {
clearTimeout(tout);
$("#topnav").animate({opacity: 1.0, width: '98%', height: '38px'});
},
mouseleave: function() {
tout = setTimeout(function() {
$("#topnav").animate({opacity: 0.9, width: '310px', height: '33px'});
}, 2000);
}
});
make use of setTimeout() and clearTimeout()
var timeout = null
var onMouseEnter = function(){
clearTimeout(timeout)
$("#topnav").animate({opacity: 1.0, width: '98%', height: '38px'})
}
var onMouseLeave = function(){
timeout = setTimeout(function(){
$("#topnav").animate({opacity: 0.9, width: '310px', height: '33px'});
},1000)
}
$('#topnav').bind({ mouseenter: onMouseEnter, mouseleave: onMouseLeave })
http://jsfiddle.net/gmhLZ/