I am working on a jQuery gallery with thumbnails and I have 2 arrows to "scroll" through these thumbnails. I first tried with the click event but my animation only runs one time then.
I have searched the internet and found the .on( 'click' ) event. I tried this but no result. Even with using .off( 'click' ) to remove the event after.
Can anyone help me with this?
$("#top_slide_button").on( 'click', function () {
$("#slide_frame").animate( { marginBottom: -50 }, 200);
$("#top_slide_button").off( 'click' );
});
$("#bottom_slide_button").on( 'click', function () {
$("#slide_frame").animate( { marginTop: -50 }, 200);
$("#bottom_slide_button").off( 'click' );
});
You can try this:
$("#top_slide_button").off( 'click' ).on( 'click', function () {
$("#slide_frame").animate( { marginBottom: -50 }, 200);
});
$("#bottom_slide_button").off( 'click' ).on( 'click', function () {
$("#slide_frame").animate( { marginTop: -50 }, 200);
});
You need to use relative values for the animation
Animated properties can also be relative. If a value is supplied with
a leading += or -= sequence of characters, then the target value is
computed by adding or subtracting the given number from the current
value of the property.
$("#top_slide_button").on('click', function () {
console.log('click')
$("#slide_frame").stop(true).animate({
marginTop: '-=50'
}, 200);
});
$("#bottom_slide_button").on('click', function () {
$("#slide_frame").animate({
marginTop: '+=50'
}, 200);
});
Demo: Fiddle
Your problem is the margin is set to 50, moving it down to 50, if you click it again, it stays at 50. you need to increment the margin-top ie adding 50 every time.
ie:
$("#top_slide_button").on('click', function () {
$("#slide_frame").stop(true).animate({
marginTop: '-=50'
}, 200);
});
$("#bottom_slide_button").on('click', function () {
$("#slide_frame").animate({
marginTop: '+=50'
}, 200);
});
http://jsfiddle.net/PbBq2/
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
Struggling a bit with jquery animate.
At the moment, if I continue to click button, clearly it shifts the object to the right 50px every time
$( ".button" ).click(function() {
$( "#object" ).animate({opacity: 1,right: "+=50",}, 500, function() {}
);
Is there a way of ensuring that one click moves it once, then a second click does not move it?
ie. a rule that moves it to right:50px and thats it, rather than + 50px?
Any assistance hugely appreciated!!
Use .one()
$( ".button" ).one('click',function() {
Fiddle Demo
You can use one():
$(".button").one('click', function () {
$("#object").animate({
opacity: 1,
right: "+=50",
}, 500, function () {
});
});
or I'd suggest you to disable the button to let your users know about your intention here:
$(".button").click(function () {
var $this = $(this);
$("#object").animate({
opacity: 1,
right: "+=50",
}, 500, function () {
$this.prop("disabled",true);
});
});
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?
Here is demo http://jsfiddle.net/NbzaE/3/
What i'm trying to do:
Disable animation if .list-item's attribute data-attr is true
Here is the working example:
$('.list-item > a:not(.active)').hover(function(){
$(this).clearQueue().stop().animate({
marginLeft: 40
}, 250);
}, function(){
$('.list-item:not([data-attr="true"]) > a:not(.active)').clearQueue().stop().animate({
marginLeft: 0
}, 250);
});
But i'm not sure that it's proper. Any ideas?
You really should use mouseenter, mouseleave events, based on: http://jquery.com/upgrade-guide/1.9/#hover-pseudo-event and in your fiddle you have a part setting the data for a parent element on click that could be simpler:
$('li.list-item').on('mouseenter', '>a:not(.active)', function () {
$(this).clearQueue().stop().animate({
marginLeft: 40
}, 250);
});
$('li.list-item').on('mouseleave', '>a:not(.active)', function () {
$(this).clearQueue().stop().animate({
marginLeft: 0
}, 250);
});
$('.list-item[data-toggle="collapse"] ').on('click', '>a', function () {
$(this).parent().data('attr', !$(this).parent().data('attr'));
});
EDIT1: Side note, you can also capture that second event on the element not on the link saving the .parent() traversal as in:
$('.list-item[data-toggle="collapse"] ').click( function () {
$(this).data('attr', !$(this).data('attr'));
});
AND IF you are dynamically creating those li elements attach to the ul:
$('ul').on('click', '.list-item[data-toggle="collapse"] ', function () {
alert($(this).data('attr'));
$(this).data('attr', !$(this).data('attr'));
});
I currently have a carousel slider which contains some text. When the user clicks the 'next' button the .carousel-text div sides up hiding the text, the carousel moves to the next slide then the .carousel-text on the next slide slides down to reveal the text.
This works fine some of the time but sometimes it will go wrong and the text will slide up and down before the carousel moves on. I'm assuming this is because the next button is clicked before the whole sequence has finished (the whole thing takes 2 seconds). Is there a way to make sure the whole thing is complete before it is called again?
jQuery("#arrow-right").click(function () {
jQuery('.carousel-text').animate({
marginTop: "-260px"
}, 500, function() {
jQuery('.carousel-inner').animate({
marginLeft: "-700px"
}, 1000, function() {
jQuery('.carousel-text').animate({
marginTop: "0px"
}, 500, function() {
// Animation complete.
});
});
});
}
EDIT: Just made a jsfiddle here: http://jsfiddle.net/UGE44/
Place a ".stop(true, true)" before you animate. This will stop the previous animations and allow the new ones to start all at the same time. Would look something like this:
jQuery('.carousel-text').stop(true, true).animate({
marginTop: "-260px"
}, 500, function() {
jQuery('.carousel-inner').stop(true, true).animate({
marginLeft: "-700px"
}, 1000, function() {
jQuery('.carousel-text').stop(true, true).animate({
marginTop: "0px"
}, 500, function() {
// Animation complete.
});
});
});
Your may want to play around with which animates you place them before, as it may not need to be in all three spots.
Set "animating" flag before animate and clear it when animation is done.
jQuery("#arrow-right").click(function () {
var $text = jQuery('.carousel-text');
if ($text.data('animating') !== true) {
$text.data('animating', true)
.animate({
marginTop: "-260px"
}, 500, function() {
jQuery('.carousel-inner').animate({
marginLeft: "-700px"
}, 1000, function() {
jQuery('.carousel-text').animate({
marginTop: "0px"
}, 500, function() {
$text.data('animating', false);
// Animation complete.
});
});
});
}
}