I am working on some functionality for an e-commerce where by a user clicks a products colour, and the previous image of the products fades out while the new product fades, I am trying to achieve a cross fade effect, however I have flicker effect in there which I do not want, I think it comes when I am removing the old image from the dom, here is a fiddle to show you what I trying to do.
http://jsfiddle.net/L9Z5G/
I hope this is what you were looking for: Demo
$('.colours').click(function() {
if ($('#' + $(this).html().toLowerCase()).attr('class') == 'active') { return; }
var active = $('.active');
var next = $('#' + $(this).html().toLowerCase());
active.fadeOut(500, function() {
$(this).toggleClass('active');
});
next.fadeIn(500, function() {
$(this).toggleClass('active');
});
});
Is it not easier to use .hide() and .show(), and just let them crossfade themselves?
To bind a click event, you use click() heres how.
$('#color1').click(function(){
$('#image1').fadeOut('fast');
});
Try this please: Working demo http://jsfiddle.net/djMZe/1/ or http://jsfiddle.net/R7u8G/1/
Hope it fits the needs! :)
code
$("#colours li").click(function() {
$(".large-image:first-child:not(.new)").animate({
opacity: 0
}, 500);
var img = $("<img />").attr('src', $(this).data("alternative")).attr("class", "large-image new");
img.css({
opacity: 0
})
$(".zoom-image").append(img);
//img.animate({ opacity : 1}, 500);
img.css({
"opacity": "1"
}).fadeIn("slow");
$(".large-image:not(:last-child)").remove();
});
See This DEMO, hope you've required this effect.
EDITED: UPDATED FIDDLE
jQuery Cycle Plugin
$('#slideshow').before('<ul id="nav">').cycle({
fx: 'fade',
speed: 'fast',
timeout: 0,
pager: '#nav',
// callback fn that creates a thumbnail to use as pager anchor
pagerAnchorBuilder: function(idx, slide) {
return '<li><img src="' + slide.src + '" width="50" height="50" /></li>';
}
});
SEE REFERENCE
Related
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 don't know how much people have used this plugin, demo but what I want is to change the default behavior of the plugin to something like animated. Currently, when you click on next or previous button, the images will be just appended without any visual animation. I just want to animate the images while appending! Can anybody suggest any good solution!! Below is the code where appending on the image takes place:
if (href.match(/\.(jpeg|jpg|gif|png)$/i) !== null) {
var img = $('<img>', { src: href });
img.one('load', function () {
var wrap = $('<div class="nivo-lightbox-image" />');
wrap.append(img); //gets appended here
content.html(wrap).removeClass('nivo-lightbox-loading');
// Vertically center images
wrap.css({
'line-height': $('.nivo-lightbox-content').height() + 'px',
'height': $('.nivo-lightbox-content').height() + 'px' // For Firefox
});
}).each(function () {
if (this.complete) $(this).load();
});
}
OK with any sort of animation
Well I just added a fadeIn after appending which seems to do some sort of animation although which is what I was accepting. Here is what I did:
wrap.append(img).fadeIn('4000');
For a very specific project, I need my image captions to appear AND Disappear every X seconds. I managed to make them appear and disappear once, but I need to to "loop". Here's my code :
<figure>
<img src="http://url/image.jpg" alt="Write your image description here" width="400" height="600">
<figcaption class="test">Write your image caption here!</figcaption>
</figure>
Jquery :
document.createElement('figure');
document.createElement('figcaption');
window.setInterval(function(){$(document).ready(function(){
$('figcaption').css('top','600px');
$('figure')(function(){
$(this).find('figcaption').animate({'top':'600px'}, 2000, function(){});
},function(){
$(this).find('figcaption').animate({'top':'540px'}, 2000, function(){});
}
);
});
}, 500);
How can I do it ?
Thanks (a lot) in advance !
Try this:
setInterval(function () {
$('figcaption').fadeToggle();
}, 5000);
Fiddle
EDIT
Updated the fiddle to match your markup.
You certainly want to do something like that:
$(document).ready(function() {
var figcaption = $('figcaption');
setInterval(function() {
figcaption.hide().delay(5000).show();
}, 10000);
});
or:
document.createElement('figure');
document.createElement('figcaption');
$(document).ready(function() {
var figcaption = $('figcaption');
figcaption.css('top', '600px');
window.setInterval(function() {
figcaption
.animate({'top':'600px'}, 2000)
.delay(3000)
.animate({'top':'540px'}, 2000)
;
}, 10000);
});
window.setInterval(function() {
$('figcaption').slideToggle();
}, 5000);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<figure>
<img src="http://url/image.jpg" alt="Write your image description here" width="50" height="50">
<figcaption class="test">Write your image caption here!</figcaption>
</figure>
In your current code, you attach a new method to the document load event every half second. Instead, initialize the interval only once on document load:
$(document).ready(function(){
window.setInterval(function(){
$('figcaption').css('top','600px');
// This call below seems a bit weird. Not sure what you try to accomplish
$('figure')(
function(){
$(this).find('figcaption').animate({'top':'600px'}, 2000, function(){});
},
function(){
$(this).find('figcaption').animate({'top':'540px'}, 2000, function(){});
}
);
}, 500);
});
I'm not to sure about the code inside that function, but without more context I find it a bit hard to judge whether that will work or not.
Instead of hiding it completely through JavaScript, you can define a transition in CSS as well. You can call toggleClass to add and remove a CSS class to the element, or you can even define an infinite animation in CSS itself. This technique is asked for and demonstrated in this answer.
This is the function can do more than you expected:
function blink(elem, times, speed) {
if (times > 0 || times < 0) {
if ($(elem).hasClass("blink")) $(elem).removeClass("blink");
else $(elem).addClass("blink");
}
clearTimeout(function () {
blink(elem, times, speed);
});
if (times > 0 || times < 0) {
setTimeout(function () {
blink(elem, times, speed);
}, speed);
times -= .5;
}
}
And you can use it as:
$(document).ready(function () {
blink(".test", 4, 500);
});
See complete JSFiddle in: http://jsfiddle.net/jadendreamer/Nx4qS/
Hope this help.
Edit:
For using animate function see this post: How to create a jQuery button with blinking text without changing the background colour?
I am trying to make div disappear and reappear by have the text disappear, the div collapsing, then the opposite with another div, using JQuery animate function but something's not working in the following code:
$(currentTab + " > p").animate({ opacity: 0},{
duration: 500,
complete: function(){
$(currentTab).animate({width: "0", opacity: 0}, {
duration: 500,
complete: function(){
$(clickedTab).animate({width: "70%"}, {duration: 500, complete: function(){
$(clickedTab + " > p").animate({
opacity: 1
}, 500);
}});
}});
}});
where currentTab and clickedTab are my div ids, like "#ct-1", and my html looks like that:
<div id="ct-1" class="content-div">
<p>aaaaaaaaaaaaaaaaaaaaaaaa</p>
</div>
<div id="ct-2" class="content-div">
<p>bbbbbbbbbbbbbbbbbbbbbbbbb</p>
</div>
So the second animate doesn't run at all. I'm guessing this has somehting to do with the DOM, maybe I can't access a parent inside the animate ? maybe it's nothing to do with it...
Thanks in advance !
Robin
Assuming currentTab is ct-1 and clickedTab is ct-2, all of your animations are working in this fiddle:
http://jsfiddle.net/3k0x3c4L/
You won't notice the width shrink unless clickedTab has a background, which I've added in the fiddle.
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