As some example code, I might have something like this:
$('a.parent').click(function(){
$('a.parent').each(function(){
$(this).stop(true,false).animate({
width: '140px'
},200,function(){
});
});
$(this).animate({
width: '160px'
},200,function(){
});
});
The problem is that I don't want the element that was clicked to animate to 140px width and then back to 160px.
Is there a way to run 'each' on only the elements in a set who were not clicked? Or is there a better way?
you can use :not(this) so change :
$('a.parent').each(function(){
$(this).stop(true,false).animate({
width: '140px'
},200,function(){
});
});
to :
$('a.parent:not('+this+')').each(function(){
$(this).stop(true,false).animate({
width: '140px'
},200,function(){
});
});
or use .not(this) after $('a.parent') , so :
$('a.parent').not(this).each(function(){
$(this).stop(true,false).animate({
width: '140px'
},200,function(){
});
});
Related
The following code works true but. How do I remove her action when clicking window or document?
$(document).ready(function(){
$("#icon").click(function(){
if(! $("#icon").hasClass('active')){
$("#icon").toggleClass('active');
$("body").animate({ margin: "0 0 0 350px" }, 400 );
$('body').css({
'overflow': 'hidden',
'height': '100%'
});
}else{
$("#icon").removeClass('active');
$("body").animate({ margin: "0 0 0 0" }, 400 );
$('body').css({
'overflow': 'auto',
'height': 'auto'
});
}
});
});
You can use window, document selectors and unbind click event using jquery method off() :
$(window ,document).click(function(){
$("#icon").off('click');
});
Hope this helps.
To remove action you can use two jquery functions to disable events. http://api.jquery.com/off/ and http://api.jquery.com/unbind/.
$(window,document).bind("click",function(){
$("#icon").unbind("click");
// or use
$("#icon").off("click");
});
https://jsfiddle.net/gmz73oew/
So I'm trying to make it so that on the click of the button the height of the div grows. I've got this animation working by itself smoothly but I'm having issues when I try to make it happen via clicking the button.
$(document).ready(function() {
$("#button1").click(function(){
$("#maBlock").animate({
height: "950px",
top: "0px",
}, 2000 );
});
}
Help is appreciated.
You need to add a bracket and a semicolon to the end, to close the ones that $(document).ready(function() { opened:
$(document).ready(function () {
$("#button1").click(function () {
$("#maBlock").animate({
height: "950px",
top: "0px",
}, 2000);
});
}); //here you need the ');'
There is a syntax error in your code
replace your js code below snippet of code
click here
$(document).ready(function() {
$("#button").click(function(){
$("#maBlock").animate({
height: "950px",
top: "0px",
}, 2000 );
});
});
You forgot bracket and semicolon in the last row
$(document).ready(function() {
alert('ciao');
$("#button1").click(function(){
$("#maBlock").animate({
height: "950px",
top: "0px",
}, 2000 );
});
});//<----- this
When I click on a div with the classname 'show', i'm adding css to the div 'mobile-menu', this works perfect, but I would like to change the css to another height when I click on the the classname "show" again
$(".show").click(function() {
$('#mobile-menu').css({ 'height': '100%' });
// when i click on .show again: .css({ 'height': '51px' });
});
Try this code.
$(".show").click(function() {
if ($('#mobile-menu').css('height') === '100%')
$('#mobile-menu').css({ 'height': '51px' });
else
$('#mobile-menu').css({ 'height': '100%' });
});
<style>
.highlight{
height: 100%;
}
</style>
$('.show').click(function() {
$('#mobile-menu').toggleClass( "highlight" );
});
You need to set a boolean indicating the state of the #mobile-menu
var isFullHeight;
$(".show").click(function() {
if (isFullHeight)
{
$('#mobile-menu').css({ 'height': '51px' });
isFullHeight = false;
}
else
{
$('#mobile-menu').css({ 'height': '100%' });
isFullHeight = true;
}
});
Try something like this:
$(".show").click(function() {
var clicks = $(this).data('clicks');
if (clicks) {
// odd clicks
$('#mobile-menu').css({ 'height': '100%' });
} else {
// even clicks
// when i click on .show again: .css({ 'height': '51px' });
}
});
What I do in these cases is
$('.someClass').toggleClass('someClass'); //removes someClass from all elements using someClass
$(this).toggleClass('someClass');
this adds and removes a class on all selectors
Try this code:
$(".show").toggle(function(){
$(#mobile-menu).css({height:40});
},
function(){
$(#mobile-menu).css({height:10});
});
I am using the following functions to grow the text box and display the submit button on focus and shrink and hide the button on blur.
But the button shows and hides before the animation is complete.
I am looking to create a neat slide down and slide up animation.
$('#venue-write-review').focus(function() {
$(this).animate({ height: '96px' }, 500);
$('#submit-review').show();
});
$('#venue-write-review').blur(function() {
$(this).animate({ height: '48px' }, 500);
$('#submit-review').hide();
});
You can specify a callback to the animate function to be executed once the animation is done.
$('#venue-write-review')
.focus(function() {
$(this).animate({ height: '96px' }, 500, function () {
$('#submit-review').show();
});
})
.blur(function() {
$(this).animate({ height: '48px' }, 500, function () {
$('#submit-review').hide();
});
});
This is all you need And don't forget to use .stop()!
$('#venue-write-review').on('focus blur',function(e){
$(this).stop().animate({ height: e.type[0]=="f"?96:48 }, 500, function(){
$('#submit-review').toggle();
});
});
e.type[0]=="f" ij just to check in a Conditional Operator (?:) if the passed event's first [0] character is f (focus; else logically it's blur)
Read the jQuery docs about the methods: .on(), .toggle(), stop() .animate() callback and on the MDN website read about Conditional operator
Also in jQuery if you don't need to animate by % or some other measure, you don't need to specify 'px' cause it's default.
You can use complete callback. Check the docs (under options section):
A function to call once the animation is complete.
Like this:
$('#venue-write-review').focus(function() {
$(this).animate({
height: '96px'
},
{
duration: 500,
complete: function() {
$('#submit-review').show();
}
}
});
});
$('#venue-write-review').blur(function() {
$(this).animate({
height: '48px'
},
{
duration: 500,
complete: function() {
$('#submit-review').hide();
}
}
});
});
I want a photo/caption to be toggled on a webpage.
The user clicks, the photo comes up followed by the caption.
The user clicks again, the caption goes away then the photo goes away.
The user clicks, the photo comes up followed by the caption.
On the third click, the photo rapidly appears (does not animate).
Here is my code.
(jQuery-1.8.1.min.js)
$(document).ready(function() {
$('#photo').width(0).height(0).css('opacity',0);
$('#caption').hide();
$('#box').toggle(
function() {
$('#photo').stop().show().animate(
{
width: '400px',
height: '300px',
opacity: 1
}, 500, function() {
$('#caption').stop().fadeIn(500);
}); //end animate
},
function() {
$('#caption').stop().hide(function() {
$('#photo').stop().fadeOut(500);
});
}
); // end toggle
});
Any suggestions?
Need more code?
UPDATE
In order to get the image to animate-in every time it is toggled, then the image has to animate-out.
EDIT2
updated the JSFIDDLE
EDIT:
Another problem showed up, this time with animation.
The jsFiddle works fine but when used with an actual image it does not animate after the first cycle.
I'm trying to stick with your original code (I just added .show() in between the photo's stop and animate calls), but I can't see what's wrong. It seems to work, see jsFiddle here.
UPDATE: I changed the "hide" function per poster's request & also updated the jsFiddle code to reflect this.
$(document).ready(function() {
$('#photo').width(0).height(0).css('opacity', 0);
$('#caption').hide();
$('button').toggle(
function() {
console.log("show");
$('#photo').stop().show().animate({
width: '400px',
height: '300px',
opacity: 1
}, 100, function() {
$('#caption').stop().fadeIn(1000);
}); //end animate
},
function() {
console.log("hide");
$('#caption').stop().hide(function(){
$('#photo').stop().animate({
width: '0px',
height: '0px',
opacity: 0
}, 100);
});
}
);
});
EDIT 3: updated code to work after one cycle : http://jsfiddle.net/kLEFy/17/
$(document).ready(function() {
$('#photo').width(0).height(0).css('opacity', 0);
$('#caption').hide();
$('body').toggle(
function() {
$('#photo').stop().show().animate({
width: '400px',
height: '300px',
opacity: 1
}, 1000, function() {
$('#caption').stop().fadeIn(1000);
}); //end animate
},
function() {
$('#caption').stop().hide(function(){
$('#photo').stop().fadeOut();
$('#photo').width(0).height(0).css('opacity', 0);
});
}
);
});