How can I stop a jquery effect after it's first execution on a mouseover? I want the box to bounce once and stop even if the mouse remains inside the box and repeat this for every time the mouse goes back into the box. Currently it runs the effect infinitely when mouse is inside the box. Thanks in advance.
I have made an example on jsfiddle
I tried:
one("mouseover", function() { $( "#div1" ).effect("bounce", "slow"); });
However this will not fire the event again when you leave the box and come back into it.
.one() works:
$( "#div1, #div2" ).one('mouseover', function() {
$(this).effect("bounce", "slow");
});
Demo: http://jsfiddle.net/Rxhzg/1/
UPDATE (based on updated question)
If by "on mouseover once" you mean just "one bounce" - add times parameter:
$( "#div1, #div2" ).mouseenter(function() {
$(this).effect("bounce", { times: 1 }, "slow");
});
DEMO 2 http://jsfiddle.net/Rxhzg/4/
$( "#div1, #div2" ).one('mouseover', function() {
$(this).effect("bounce", { times: 1 }, "slow");
});
$( "#div1, #div2" ).mouseleave(function() {
$(this).one('mouseover', function() {
$(this).effect("bounce", { times: 1 }, "slow");
});
});
check this http://jsfiddle.net/Rxhzg/6/
OR check this one http://jsfiddle.net/Rxhzg/8/ because the above one will continue bounce if mouse is at bottom of box.
$( ".parentDiv" ).one('mouseover', function() {
$(this).find('.navBox').effect("bounce", { times: 1 }, "slow");
});
$( ".parentDiv" ).mouseleave(function() {
$(this).one('mouseover', function() {
$(this).find('.navBox').effect("bounce", { times: 1 }, "slow");
});
});
This example is similar to other answers, however it abstracts the original bind into a function for reusability.
var $target = $( "#div1, #div2" );
function bounce() {
$target.one('mouseover', function () {
$(this).effect("bounce", { times: 1 }, "slow");
});
}
$target.on('mouseout', bounce);
bounce();
Related
I looked through much of the material via search.
first animation shows object that is off screen.
second animation scrolls to object using url.com/#bottom
$( "#contactbtn" ).click(function() {
$( "#contactform" ).show( "fast", function() {
// Animation complete.
});
});
$('a[href^="#"]').on('click', function(event) {
var target = $(this.href);
if( target.length ) {
event.preventDefault();
$('html, body').animate({
scrollTop: target.offset().top
}, 1000);
}
});
Each animation works great independently, but when combined they occur instantly and conflict causing
a none fluid transition to the element. Would like to know way of combining, perhaps by delay or queuing.
you can do something like this
var onClickFun = function() {
$('a[href^="#"]').on('click', animateFun());
}
function animateFun()(event) {
var target = $(this.href);
if( target.length ) {
event.preventDefault();
$('html, body').animate({
scrollTop: target.offset().top
}, 1000);
}
$( "#contactbtn" ).click(function() {
$( "#contactform" ).show( "fast", onClickFun());
});
Call second animation only after first is complete and give time lag according to your requirement.
You are so close - in fact, your comment // Animation complete is exactly where the next animation goes!
Many jQuery animations, including show() and animate(), accept a callback function as their last parameter. This lets you do something only once the animation is complete. For your example, if you wanted to show the contact form and then add the listener for anchor tags:
$( "#contactbtn" ).click(function() {
$( "#contactform" ).show( "fast", function() {
//* Right here we are in the callback to the .show() method.
//* This code below is only run once the element has been shown.
$('a[href^="#"]').on('click', function(event) {
event.preventDefault();
var target = $(this.href);
if ( target.length ) {
$('html, body').animate({
scrollTop: target.offset().top
}, 1000);
}
});
});
});
Alternatively, you can make scrollToAnchor its own function. This way you can keep your code tidy and just pass it as a callback. Callback functions receive arguments in the same order that they are passed. In this case, the event object will be passed to scrollToAnchor.
You can see how this code is both more readable and will be easier to maintain.
function scrollToAnchor(e) {
e.preventDefault();
var target = $(this.href);
if ( target.length ) {
$('html, body').animate({
scrollTop: target.offset().top
}, 1000);
}
}
$( "#contactbtn" ).click(function() {
$( "#contactform" ).show( "fast", function() {
//* Right here we are in the callback to the .show() method.
//* This code below is only run once the element has been shown.
$('a[href^="#"]').on('click', scrollToAnchor);
});
});
I have created a very simple jQuery sliding function that works, but requires improvements. The basic timeline of the function needs to:
SlideDown on mouseenter
Stay visible until mouseleave
When mouseleaves, delay the SlideUp by 2 seconds
^^This works, but if you slide up and down several times, the function stops working for a few seconds. Can anyone please suggest a solution? JS FIDDLE attached
JSFIDDLE: http://jsfiddle.net/lord_dev/b1g50eqk/4/
$(document).ready(function(){
$hover = true;
$( "#slide" ).mouseenter(function() {
if($hover) {
$( ".slide--hidden" ).slideDown('fast');
}
});
$( "#slide" ).mouseleave(function() {
$hover = false;
$( ".slide--hidden" ).delay(2000).slideUp('fast').queue(function(){
enableHover();
$(this).dequeue();
});
});
function enableHover() {
$hover = true;
}
});
Replace your javascript with this. It works great if i understood your problem correctly.
$(document).ready(function(){
var thetimeout;
$('#slide').mouseover(function() {
clearTimeout(thetimeout);
$('.slide--hidden').slideDown();
});
$('#slide').mouseleave(function() {
thetimeout = setTimeout(function() {
$('.slide--hidden').slideUp();
}, 2000);
});
});
I'm trying to make a toggle button, so when you click once on #mbtn, it must be set to top:0px and when you click a second time, it must be set to top:-110px.
Here is the code I'm using but it seems like it's not working, where am I wrong?
<script>
$(document).ready(function() {
$('#mbtn').toggle(
function() {
$('.menu').animate({
top: "0px"
}, 500);
},
function() {
$('.menu').animate({
top: "-110px"
}, 500);
}
);
});
</script>
Per jQuery API, you have to use toggle with an action, such as click. For example:
$( "#mbtn" ).click(function() {
$( ".menu" ).toggle( "slow", function() {
// Animation complete.
});
});
JSfiddle
I assume you were trying to hide the menu bar? if so, take a look at .slideToggle() instead. Here is the JSfiddle example.
i have a small Tooltip Script when the user hover a block the Tooltip will be shown and if the user leave the block the tooltip is hidden.
But i want also when the user hover over the tooltip the tooltip stay until the user leaves the tooltip or the hover block.
here is my javascript without the hover over the Tooltip:
$( "#hover, .tooltip" ).on('mouseenter', function() {
$( ".tooltip" ).fadeToggle( 400, function() {
// Animation complete.
});
});
$( ".tooltip, #hover" ).on('mouseleave', function() {
$( ".tooltip" ).fadeToggle( 400, function() {
// Animation complete.
});
});
Here is a small Fiddle without the second part:
http://jsbin.com/vocirucawoje/1/edit
use stop() to stop the animation.
$( "#hover, .tooltip" ).on('mouseenter', function() {
$( ".tooltip" ).stop().fadeToggle( 400, function() {
// Animation complete.
});
});
$( ".tooltip, #hover" ).on('mouseleave', function() {
$( ".tooltip" ).stop().fadeToggle( 400, function() {
// Animation complete.
});
});
<input type="button" class="hover" value="Click" />
<div class="tooltip" style="display:none;">Tool tip Text</div>
$('.hover').mouseenter(function () {
$(".tooltip").stop().fadeToggle(400, function () {
// Animation complete.
});
});
$('.tooltip').mouseleave(function () {
$(".tooltip").fadeToggle(400, function () {
// Animation complete.
});
});
It will help you.
I am trying to create a toggle because for some reason the toggle function is not working.
this works as expected. it basically does the animation an a couple of css call then swaps classes for the next function call.
$(document).ready(function() {
$(".m-menu").click( function(){
if ($('.mobile-menu').hasClass("menu") ) {
$(".mobile-menu").animate({left: '0'}, 500);
$(".mobile-menu-bg").animate({left: '0'}, 500);
$(".menu-close").css('display','inline');
$(".menu-open").css('display','none');
$( '.m-menu' ).removeClass( "m-menu" ).addClass("m-menu2");
}
});
});
The next function looks like this, which is suppose to execute if the class is there, then switch back to the original class. What am I doing wrong here?
$(document).ready(function() {
$(".m-menu2").click( function(event){
event.preventDefault();
if ($('.mobile-menu').hasClass("menu") ) {
$(".mobile-menu").animate({left: '-200'}, 500);
$(".mobile-menu-bg").animate({left: '-2000'}, 500);
$(".menu-close").css('display','none');
$(".menu-open").css('display','inline');
$('.m-menu2').removeClass( "m-menu2" ).addClass("m-menu");
}
});
});