I'm a javascript/jquery rookie, but I try to put in place a an interactive page containing multiple divs. These Divs enlight when we pass the mouse over and turn back to normal when mouse leaves the div. The div enlarges when clicked, and a "back" button" must turn back the div to "normal" state. My problem is the behavior of the div when click the back button, and it starts to get back to normal but enlarges again afterward. I know I could resolve the problem by moving the "button" out of the div, but is there any other solution ?
Also, how to "stop" the opacity change when enlarging the DIV ? Tried the stop() function in various scenarios but without success so far...
Thanks for the help.
Here is the HTML code :
<div id='container'>
<div id='back_button'>BACK</div>
</div>
And here is for the jQuery
$(document).ready(function () {
$('#container').hover(function () {
$(this).fadeTo('fast', 1);
}, function () {
$(this).fadeTo('fast', 0.8);
}).click(function () {
$(this).stop().animate({
width: "600px",
height: "600px",
opacity: 1
});
$('#back_button').fadeTo('fast', 1);
});
$('#back_button').click(function () {
$(this).stop( true, true ).parent().animate({
width: "200px",
height: "100px"
});
});
});
I also created an example on jsfiddle
Stop the click on the back button from propagating up to the parent, and you can use a class to disable the hover events when the element is enlarged.
$(document).ready(function () {
$('#container').hover(function () {
if ( ! $(this).hasClass('large') ) $(this).fadeTo('fast', 1);
}, function () {
if ( ! $(this).hasClass('large') ) $(this).fadeTo('fast', 0.8);
}).click(function () {
$(this).animate({
width: "600px",
height: "600px",
opacity: 1
}).addClass('large');
$('#back_button').fadeTo('fast', 1);
});
$('#back_button').click(function (e) {
e.stopPropagation();
$(this).parent().animate({
width: "200px",
height: "100px"
}).removeClass('large');
});
});
FIDDLE
please use this updated code
$(document).ready(function () {
$('#container').hover(function () {
$(this).stop().fadeTo('fast', 1);
}, function () {
$(this).stop().fadeTo('fast', 0.8);
}).click(function (e) {
if(e.target.id=="back_button" || $(this).width()>200){
return;
}
$(this).stop().animate({
width: "600px",
height: "600px",
opacity: 1
});
$('#back_button').fadeTo('fast', 1);
});
$('#back_button').click(function () {
$('#container').animate({
width: "200px",
height: "100px",
});
});
});
Related
For this animation I use velocity.js and here is the code
$(document).ready(function() {
$('.shrink').on('click', function() {
$(".spread").removeClass("spread").addClass("shrink");
$(this).removeClass("shrink").addClass("spread");
$(".spread").velocity({
width: "80%"
}, 300);
$(".shrink").velocity({
width: "5%"
}, 300);
$('.spread').on('click', function() {
$(this).removeClass("spread").addClass("shrink");
$(".shrink").velocity({
width: "20%"
}, 300);
});
});
});
and the jsfiddle with full animation preview.
So, when you click on some column it opens and click again it closes. That is how it is supposed to work. But, the problem is if you now click again on the same column, it will open and close immediately, which is not the effect I want.
How can I fix this?
Btw, not sure why, but currently is not working in chrome, but it works in ff.
Learn about event delegation
simple rewrite of your code becomes
$(document).ready(function () {
$('body').on('click', '.spread', function () {
$(this).removeClass("spread").addClass("shrink");
$(".shrink").velocity({
width: "20%"
}, 300);
});
$('body').on('click', '.shrink', function () {
$(".spread").removeClass("spread").addClass("shrink");
$(this).removeClass("shrink").addClass("spread");
$(".spread").velocity({
width: "80%"
}, 300);
$(".shrink").velocity({
width: "5%"
}, 300);
});
});
DEMO
Im curious , is that possible to count toggle ? Because I have one problem , when I hover it and hover out multiple times and select one of the item, the button will push to bottom and not able to seen. Or that is another way to fixed this problem ?
updated
Not multiple times even I hover in and hover out and hover it again it also push to bottom.
click here for js fiddle
JS
$("#popup_survey_whitebox").hover(function () {
$('#popup_survey_whitebox_content').stop().animate({
opacity: 1,
height: "toggle"
}, 500, function () {
$("label#popup_survey_label_title").text(orig); // Here put the original text.
}).css('position', 'relative');
}, function () {
$('#popup_survey_whitebox_content').stop().animate({
opacity: 1,
height: "toggle"
}, 500, function () {
$("label#popup_survey_label_title").text(newText); // Here put the new text with "..."
}).css('position', 'relative');
});
Finally I found a way to fixed this problem .
$("#popup_survey_whitebox").hover(function () {
$('#popup_survey_whitebox_content').finish().animate({
opacity: 1,
height: "toggle"
}, 500, function () {
$("label#popup_survey_label_title").text(orig); // Here put the original text.
}).css('position', 'relative');
}, function () {
$('#popup_survey_whitebox_content').finish().animate({
opacity: 1,
height: "toggle"
}, 500, function () {
$("label#popup_survey_label_title").text(newText); // Here put the new text with "..."
}).css('position', 'relative');
});
change $('#popup_survey_whitebox_content').stop() to $('#popup_survey_whitebox_content').finish() for both animate
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've been having some difficulties, could someone point me in the right direction for this fiddle?
I need the div to animate on hover, but only when the .isDown class has been added to a different element by the click function.
Fiddle
$(".move").click( function(event){
event.preventDefault();
if ($(this).hasClass("isDown") ) {
$(this).stop().animate({opacity:"0.5"}, 270);
$(this).removeClass("isDown");
//can put hover in here????
} else {
$(this).stop().animate({opacity:"1"}, 300);
$(this).addClass("isDown");
}
return false;
});
if ($(".move").hasClass("isDown")){
$(".funnyMOVE").hover(
function() {
$(this).stop().animate({top:"10px"},215);
},
function() {
$(this).stop().animate({top:"0px"},230);
});
}
Use the same condition inside the hover function. You are only binding the event in DOM ready based on the condition. So the event is never bound as the condition is false to start with.
$(".fuckerMOVE").hover(
function () {
if ($(".move").hasClass("isDown")) {
$(this).stop().animate({
top: "10px"
}, 215);
}
},
function () {
if ($(".move").hasClass("isDown")) {
$(this).stop().animate({
top: "0px"
}, 230);
}
});
Check Fiddle
Here is working code:
I removed your code outside of the .move click and put this in it:
$(".fuckerMOVE").hover(function () {
$(this).stop().animate({
top: "10px"
}, 215);
},
function () {
$(this).stop().animate({
top: "0px"
}, 230);
});
Fiddle
The problem was that if ($(".move").hasClass("isDown")){ was reached on document load, where this would have been false. My solution was just to apply the hover bind on the element directly when you are wanting it to be bound.
I actually just realized it looks like you were wanting to remove the bind if the .move is clicked again. If this is the case, you can move your bind into your else block and then add this to the if block:
$(".fuckerMOVE").off("mouseenter mouseleave");
The reason for mouseenter and mouseleave is that behind the scenes hover() sets listeners for these events.
Fiddle
not sure if this is what you want.
http://jsfiddle.net/hvLA6/
$("#move").click( function(event){
event.preventDefault();
if ($(this).hasClass("isDown") ){
$(this).stop().animate({opacity:"0.5"}, 270);
$(this).removeClass("isDown");
} else {
$(this).stop().animate({opacity:"1"}, 300);
$(this).addClass("isDown");
}
if ($("#move").hasClass("isDown")){
$(".fuckerMOVE").hover(
function() {
$(this).stop().animate({top:"10px"},215);
},
function() {
$(this).stop().animate({top:"0px"},230);
});
}
return false;
});
CSS
div {
width:100%;
height:100px;
background:black;
position:relative;
}
#move {
font-size:20px;
background:pink;
}