I am making a gallery with thumbnails. It works but I want to make an image transition, and I want it to fades in. In this case it fades in but only for the first image. The next images show up without any animation.
$('.picture').click(function() {
$("#screen img").attr('src', $(this).attr('src')).animate({
height: "400px"
}, 2000);
});
And also, can someone tell me how to position the image in the div to be centrally placed using the width and the height of the div and the image? I don't want to use plugin for the gallery, so I would appreciate your help very much.
To maintain your current transition try
var $simg = $("#screen img");
$('.picture').click(function () {
var $img = $(this);
if ($simg.height() == 0) {
$("#screen img").attr('src', $(this).attr('src')).animate({
height: "400px"
}, 2000);
} else {
$("#screen img").animate({
height: "0"
}, function () {
$(this).attr('src', $img.attr('src')).animate({
height: "400px"
}, 2000)
});
}
});
Demo: Fiddle, using fade animation
Related
I made div, if i click on it, jquery makes bullet and that element is animated. This is code:
$('.square').click(function() {
$('<div class="bullet"></div>').appendTo($('body')).animate({
'margin-top': 554
}, 2000, function() {
$(this).remove();
});
});
It works properly when I'm not clicking second time on div before animation is done. If i do this, my second "bullet" starts animation from position of first.
How to fix that? Thank's for help :)
UPDATE##
Here's the jsfiddle with problem:
https://jsfiddle.net/2ghj1x45/
it's because the elements all have a size because they aren't positioned absolutely so each bullet div you add has display block, so will get it's own line where it's height is bullet size + margin top , which increases as it's animated. try instead using position absolute so the bullet div doesn't affect the layout of any other div
like so
$(bullet).animate({ top: value });
Why not timeout the click function with a variable:
var animating = false;
$('.square').click(function() {
if(!animating) {
animating = true;
setTimeout(function() {
animating = false;
}, 2000);
$('<div class="bullet"></div>').appendTo($('body')).animate({
'margin-top': 554
}, 2000, function() {
$(this).remove();
});
}
});
EDIT:
Updated JSfiddle
I have a series of images which change their image when hovering on them and also a div animate (as an overlay) on the image during hover.
The code is as follow:
// hide overlays
$(".mini-shop .item .image a div").hide();
// toggle overlay and second image
$(".mini-shop .item .image").hover(
function() {
$img = $(this).find('a img');
$img.stop().hide();
var src = $img.attr('src');
$img.attr('src', $img.attr('data-csrc'));
$img.stop().fadeIn(300);
$img.attr('data-csrc', src);
$(this).find('a div').stop().animate({
'top': '80%'
}, 300).css('display', 'block');
},
function() {
$img = $(this).find('a img');
$img.stop().fadeOut(100);
var src = $img.attr('src');
$img.attr('src', $img.attr('data-csrc'));
$img.stop().fadeIn(300);
$img.attr('data-csrc', src);
$(this).find('a div').stop().animate({
'top': '100%'
}, 300).css('display', 'none');
}
);
my problem is, only the effects in the first function (mouseenter) work and in the mouseleave method the overlay disappears immediately and the fade effect does not work! What is the problem of this code?
I know this may be a bit of a hassle, but have you tried separating them into one mouseenter() function and the other a mouseleave()? I know the hover() is supposed to cover both, however, I see no errors in your code so I cannot propose much more than to do what I have said.
i am trying to creat a carousel animation that take 3 pics and slide the to the left and bring new 3 images, i don't think i'm in the right direction need help
here is the fiddle link: http://jsfiddle.net/G5cKK/11/
setInterval(function () {
$('img:first').animate({
'left': -$('.box').width() + 'px'
},1000, function () {
$(this).remove().appendTo('.all')
});
}, 5000);
You can animate width instead of position:
JavaScript
setInterval(function() {
var $img = $('img:first');
var $imgClone = $img.clone().width(0).appendTo('.all');
$img.animate({'width': 0},1000, function(){$img.remove()});
$imgClone.animate({'width': 65},1000);
}, 5000)
Demo: http://jsfiddle.net/G5cKK/12/
I have a stack of images I'm bringing in from YouTube, and I want the top image to fade out on hover and then start a rotating slideshow of the next 3 images. I've almost got it working but I'm having an issue with getting the SetInterval to stop when I hover off of the thumbnail.
thumbRotate: function(){} //This is up in the main object
//hover state over thumbs and slideshow animation
$('#youtube-widget ul a').hover(
// hover-in
function(){
$this = $(this);
$(this).children('.title-overlay').children('h5, img, span').stop(true, true).animate({opacity: '0'}, 200, function() {
$.Modules.VideoWidget.thumbRotate = setInterval(function() {
var topImage = $this.children('img:first');
topImage.stop(true, true).fadeOut(500).next().stop(true, true).fadeIn(500).end().appendTo($this);
}, 2000);
});
//hover-out
}, function() {
clearInterval($.Modules.VideoWidget.thumbRotate);
$(this).children('.title-overlay').children('h5, img, span').stop(true, true).animate({opacity: '1'}, 200);
}
);
edit: I noticed that hovering over the thumbnail seems to be increasing animation exponentially. For some reason the animations seem to be stacking up on themselves, but I don't really understand why.
Here is the problem - .hover() and .mouseover()...
Both of these functions perform an action not only when the cursor enters the element but also every time the mouse moves a single pixel within the element. In other words those 2 functions are great for simpler interactions, but it is necessary to use .mouseenter() and mouseleave() to setup interval functions otherwise you end up setting a new interval every time the cursor moves within the element (which can be a lot).
new fiddle - http://jsfiddle.net/b3Mb8/2/
new code -
//thumb rotate animation on hover
function startRotate($this) {
$.Modules.VideoWidget.thumbRotate = setInterval ( function() {
topImage = $this.children('img').filter(":first");
topImage.animate({opacity: '0'}, 500).next().animate({opacity: '1'}, 500).end().appendTo($this);
}, 800);
}
function stopRotate() {
clearInterval($.Modules.VideoWidget.thumbRotate);
}
$("#youtube-widget ul a").mouseenter(function() {
$this = $(this);
startRotate($this);
}).mouseleave(function() {
stopRotate();
});
//hover state over thumbs and slideshow animation
$('#youtube-widget ul a').hover( function(){
$this.children('.title-overlay').children('h5, img, span').stop(true, true).animate({opacity: '0'}, 300, function() {
});
//hover-out
}, function() {
$this.children('.title-overlay').children('h5, img, span').stop(true, true).animate({opacity: '1'}, 300);
});
It's an issue with your variable name I think. It's working here:
I just added this and used it in both intervals
var hoverInterval;
http://jsfiddle.net/b3Mb8/
I want to have a div that animates the currently active image out of the view and instead animates in another image. There are several of these divs, and each one should have the same basic functionality but linked to different images. The problem I'm having is that you can click many of the divs before the animation is complete, which fires the other animations at the same time. My goal is to only be able to fire one animation at a time, and when the animation finishes you're able to fire the next animation. I've tried using unbind which works OK but then I'd have to rebind it later and I don't know how to do this. I'm really a jQuery noob so I would greatly apreciate an answer. Thanks!
My code:
$('.div1').click(function clickevent() {
$('.img2, .img3').animate({
opacity: 0.1,
left: 600
}, 1000, function() {
$('.img1').animate({
opacity: 1,
left: 0
}, 500, function() {
$('.div2, .div3').bind('click', clickevent); /* Here I want to rebind the function */
});
});
$(this).addClass("active");
$('.div2, div3').removeClass("active");
$('div2, .div3').unbind('click', clickevent);
});
I have two other codeblocks for .div2 and .div3 which look the same but with different classes in different places. Is there any way to make the images finish their animation before being able to animate again? Thanks.
Is this what you need:
var canAnimate = true;
$('.div1').click(function clickevent() {
// these 4 lines have to be in all code blocks (ie. for .div2 and .div3)
if (! canAnimate) {
return;
}
canAnimate = false;
$('.img2, .img3').animate({
opacity: 0.1,
left: 600
}, 1000, function() {
$('.img1').animate({
opacity: 1,
left: 0
}, 500, function() {
canAnimate = true; // this should also be included for .div2 and .div3 code blocks
});
});
$(this).addClass("active");
$('.div2, div3').removeClass("active");
});
I think queue() will append the animations but not stop them, so if you click 10 times on the images, the click handler will animate it 10 times but one after another. I guess you want only animate the images when no image is currenty animated so you can use:
$('.div1').click(function clickevent() {
// When no image is currently animated then perform the animation
if($j('.img1, .img2, .img3').is(':animated') == false)
{
$('.img2, .img3').animate({
opacity: 0.1,
left: 600
}, 1000, function() {
$('.img1').animate({
opacity: 1,
left: 0
}, 500);
});
$(this).addClass("active");
$('.div2, div3').removeClass("active");
} else {
// There is currently an animation runnig, do nothing
}
});
See this for more information: http://api.jquery.com/animated-selector/
You should also get some information about caching of selection results.