please look at this fiddle http://jsfiddle.net/rabelais/4X63B/3/
In this fiddle when one hovers on the bars the animations start and stop. I want to know how to change this Jquery code so that the animation starts and stops on click instead? Also when one animation is started and the user clicks on the other bar it will pause to. At the end of each animation a refresh button is display to reset the animation.
$('#one').mouseenter(function(){
$('.alt0').animate({width: $(this).width()}, ($(this).width())/2*1000,"linear",function(){
$("#refresh-1").show();
})
});
$('#refresh-1').click(function(){
$('.alt0').width(0);
$(this).hide();
})
$('#one').mouseleave(function(){
$('.alt0').stop()
});
Try
$('#one').on('click', function () { //when first is clicked
$('.alt1').stop(); //stop second animation
$('#two').removeClass('active'); //remove seconds active class
if ($(this).hasClass('active')) { //check if clicked item has active class
$('.alt0').stop(); //stop animation
$(this).removeClass('active'); //remove active class
} else { //if not active or animating
$(this).addClass('active'); //add active class
$('.alt0').animate({ //start animation
width: $(this).width()
}, ($(this).width()) / 2 * 1000, "linear", function () {
$("#refresh-1").show();
});
}
});
$('#refresh-1').click(function () {
$('.alt0').width(0);
$(this).hide();
})
Similarly do the same for second bar. If you dont want another bar to stop animating on click of other bar
just remove the part from code
$('.alt1').stop(); //stop second animation
$('#two').removeClass('active');
$('.alt0').stop(); //stop firstanimation
$('#one').removeClass('active');
Full example http://jsbin.com/UseTIji/1/
First change mouseenter to mouse click
$('#one').mouseenter(function() → $('#one').click(function()
Enter some variable that will change on every click:
var oneIsPlayed = false
$('#one').click(function() {
oneIsPlayed = !oneIsPlayed;
if ( oneIsPlayed ) {
//code to stop
} else {
//code to start animation
}
})
Breaking down the code:
$('#one').mouseenter(function(){
$('.alt0').animate({width: $(this).width()},
($(this).width())/2*1000,"linear",function(){
$("#refresh-1").show();
})});
This is the part that starts the animation when the mouse enters the element. You can change it so the animation starts on a mouse click by changing it to click:
$('#one').click(function(){
$('.alt0').animate({width: $(this).width()},
($(this).width())/2*1000,"linear",function(){
$("#refresh-1").show();
})});
You can do the same with the stop animation component:
$('#one').click(function(){
$('.alt0').stop()
});
If you want to make a click on one bar stop the animation on the other, you can add a stop method call to the start animation call:
e.g.
$('#two').click(function(){
$('.alt1').animate({width: $(this).width()},
($(this).width())/2*1000,"linear",function(){
$("#refresh-2").show();
$('.alt0').stop();
})});
It seems that you jsfiddle isn't loading for me at the moment, so I can't test. But I hope that can get you in the right direction.
On click of that div, applying animation. Give some duration for that animation and when the duration get over you can get its callback so then remove that style.
$(document).ready(function () {
$('#service').click(function () {
$("#ServiceSublist").animate({opacity: 0.25,
left: "+=50",
height: "toggle"
}, 1000, function() {
alert("amination complete");
});
});
});
Related
I have a button that does a "flyin" animation when click. But if the user clicks the button to deselect their choice i need to disable the animation.
The class changes when they have selected their choice from ".simple-button" to ".simple-button active".
jQuery(document).ready(function ($) {
$(".simple-button").on('click', function () {
//Scroll to top if cart icon is hidden on top
$('html, body').animate({
'scrollBottom': $(".view-my-beds").position().top
});
//Select item image and pass to the function
var itemImg = $(this).parent().find('img').eq(0);
flyToElement($(itemImg), $('.view-my-beds'));
});
});
It my experience, it's best to add a class on click. This means we can detect if it's in use, thus - making your problem simple to solve:
$('.simple-button').on('click', function ()
{
if (!$(this).hasClass('active')) {
$('html, body').animate({
'scrollBottom': $('.view-my-beds').position().top
});
var itemImg = $(this).parent().find('img').eq(0);
} else {
// do whatever without animation
}
})
I have one proplem and I hope you guys could help me with it.
Please check my jsfiddle > myFiddle
If you'll click on the 'Details' button you will see the more information about the item with a simple animation.
You can close this details by clicking on the 'cross' icon on the top left corner and you will see the closing animation.
My proplem:
When current item (container) details is opened (and I am not closing details with the 'cross' icon) if I click on other item 'Details' button the first item (container) details did not hide (with the animation).
If someone could help, that would be amazing
Thanks
jQuery('.btn.desktop').click(function(){
jQuery('.btn.desktop.active').not(this).removeClass('active');
jQuery(this).addClass('active');
jQuery('.direction-container.active').not(this).removeClass('active');
jQuery(this).addClass('active');
// If button has class active
if (jQuery('.btn.desktop').hasClass('active')) {
// If button is active add class active to direction container
jQuery(this).parent().closest('.direction-container').addClass('active');
// If direction container has class active
if (jQuery('.direction-container').hasClass('active')) {
// Show details container
jQuery('.direction-container.active').find('.details-desktop').fadeIn(500);
// Scroll down direction container after 500ms
setTimeout(function () {
jQuery('.direction-container.active').animate({scrollTop: '100px'}, 500);
}, 500);
// Show close button
setTimeout(function () {
jQuery('.direction-container.active').parent().find('.close-details-desktop').fadeIn(500);
}, 1000);
// Hide details container
jQuery('.direction-container.active').parent().find('.close-details-desktop').click( function() {
jQuery('.direction-container.active').animate({scrollTop: '0px'}, 300);
setTimeout(function () {
jQuery('.details-desktop').fadeOut(300);
jQuery('.close-details-desktop').fadeOut(500);
}, 300);
setTimeout(function () {
jQuery('.direction-container, .btn.desktop').removeClass('active');
}, 500);
});
} else {
}
} else {
}
return false;
});
You are not fading them out.
jQuery('.direction-container.active').parent().find('.close-details-desktop').click( function() {
That only creates a click handler for an active container button. It doesn't trigger a click. Also, it should not be there somewhere deep inside another click handler, as it will only become active after a click on .btn.desktop
Your code is too complex, making it hard for yourself.
What I am trying to accomplish is having a menu that will show up when a "button" is clicked (the button and menu are in separate elements so the mouse is not hovering over the menu initially).
The menu should hide itself if it is not hovered over within the duration of the timeout (currently it does this, but only the first time it is clicked).
Also, if the element gets hovered over, I would like hide on mouseout and clear the timer and clicking the button again would reset the timeout (it is not resetting maybe?).
I have tried several incarnations and nothing I have tried has behaved correctly and am looking for advice. This his is what I am currently using:
var mytimer = window.setTimeout(function() {$('.menu-div').slideUp(function() {
window.clearTimeout(this.mytimer);
})
}, 5000);
$().ready(function(){
$('#menu-button').click(function () {
$('.menu-div').slideDown();
$(mytimer);
});
$('.menu-div').mouseenter(function() {
window.clearTimeout(this.mytimer);
});
$('.menu-div').mouseout(function() {
$('.menu-div').slideUp(200);
});
});
I think you want something like this (just a guess, because you didn't give any HTML)
$(function(){
var mytimer=0;
$('#menu-button').click(function () {
$('.menu-div').slideDown();
mytimer = setTimeout(function(){
$('.menu-div').slideUp();
}, 5000);
});
$('.menu-div').mouseenter(function() {
clearTimeout(mytimer);
});
$('.menu-div').mouseleave(function() {
$('.menu-div').slideUp();
});
});
DEMO.
The idea is to move a div downwards slightly when hovered and when clicked to move further down to reveal content. The problem is that when you have clicked the div and it moves down you are no longer hovering on it so it performs the 'close when not hovered function.
$(function () {
$('.more').hover(function () { //Open on hover
$('#pull_down_content').animate({
'top': '-360px'
}, 1000);
}, function () { //Close when not hovered
$('#pull_down_content').animate({
'top': '-380px'
}, 1000);
});
});
$('.more').click(function () { //Move down when clicked
$('#pull_down_content').animate({
'top': '0px'
}, 1000);
});
Put a class on the element to signify that it has been clicked, and do not close it if it has that class:
$(function() {
$('.more').hover(function(){ //Open on hover
$('#pull_down_content').animate({'top':'-360px'},1000);
},
function(){ //Close when not hovered
if (!$('#pull_down_content').hasClass("expanded"))
$('#pull_down_content').animate({'top':'-380px'},1000);
});
});
$('.more').click(function(){ //Move down when clicked
$('#pull_down_content').addClass("expanded").animate({'top':'0px'},1000);
});
Of course you now need another trigger to determine when exactly to undo the hover animation after the item has been clicked; how to do that exactly depends on the effect you want to achieve.
The problem is that when you have clicked the div and it moves down
you are no longer hovering on it so it performs the 'close when not
hovered function.
I'm not sure I get it? You do know that the element with the bound events is not the same as the one that you are animating ?
Anyway, something like this maybe:
$(function() {
$('.more').on('mouseenter mouseleave click', function(e) {
if (!$(this).data('clicked')) {
var Top = e.type==='mouseenter' ? '-360px' : e.type==='click' ? '0px' : '-380px';
$('#pull_down_content').stop().animate({'top': Top}, 1000);
if (e.type==='click') $(this).data('clicked', true);
}else{
if (e.type==='click') {
$(this).data('clicked', false);
$('#pull_down_content').stop().animate({'top': '-380px'}, 1000);
}
}
});
});
FIDDLE
I want to show an image after there is hover on link for atleast 1500ms or there is a click. How can I implement this minimal period hover condition while showing up the image ?
The image should remain visible until there is hover on the link or on itself. & should disappear as the mouse moves out of both. How can I implement this ? Thanks in advance!
http://jsfiddle.net/sSBxv/
$('a').click(function() {
alert(1); // alert on click
})
.hover(function() { // when mouse is entering
var $this = $(this);
// set timeout, save timeout id on element to clear later
$this.data('timeout', setTimeout(function() {
$this.click(); // click after 1500ms
}, 1500));
}, function() { // when mouse is leaving
clearTimeout($(this).data('timeout')); // stop the timeout
});
Try this
var hoverTimer;
$("linkSelector").hover(function() {
hoverTimer = setTimeout(function() {
$("imgSelector").show();
}, 1500);
}, function(){
clearTimeout(hoverTimer);
}).click(function(){
clearTimeout(hoverTimer);
$("imgSelector").show();
});
Something to the effect of...
$("#MyLinkSelectorId").hover(function() {
//Do anything you need to do here when it is clicked/hovered
setTimeout(function() {
//Do all of the other things here
}, 1500);
});
Switch out hover with click or bind multiple events to take care of both event types. To hide the images, you can either use a selector on the images with the .hide() method or you can set the opacity if the browser supports it.
$("a.class").hover( function (){ //First parameter is onmouseenter, show the image
$("img").show();
}, function (){ //second is onmouseleave, set a timeout that will hide the image
setTimeout( function(){
$("img").hide();
}, 1500);
}).click( function() { //on click, hide the image right away.
$("img").hide();
});
Since it looks like you haven't already tried something I'll give you the simplest way using jQuery (please note I haven't tested this):
$("#idOfDiv").mouseover(function() {
setTimeout("alertMsg()",1500);
});
function alertMsg()
{
alert('Ive been entered for 1500ms')
}
Also if you're serious about software development you should've been able to come up with this yourself.