I am working over on of my student projects and I am new jquery, for the project I have to use jquery to enhance few function and I have learned much to carry out basic tasks, but I am stuck over something very confusing.
One my scripts actually changes the image of a div container at mouse over function, function is currently fine but make it feel a little beautiful I want to add transition affects to it either through fade in fade out functions or through animate but am unable to work it out with both. I searched over internet but here i am unable to relate those examples to mind here.
I just want to know where can I insert fade in fade out or animate function in this code, to give it a transitioning effect:
$(document).ready(function () {
$(".thumb").hover(function () {
var dummyImg = $(this).attr("alt");
$(this).attr("alt", $(this).attr("src"));
$(this).attr("src", dummyImg);
}, function () {
var dummyImg = $(this).attr("src");
$(this).attr("src", $(this).attr("alt"));
$(this).attr("alt", dummyImg);
});
});
Thank-you!
You want to access the callback function of the fadeIn and fadeOut functions, this will allow you to make changes to the src image and what not. it would look something like this ->
$(document).ready(function () {
$(".thumb").hover(function () {
var dummyImg = $(this).attr("alt");
$(this).fadeOut('slow', function(){
//this is now the callback.
$(this).attr("alt", $(this).attr("src"));
$(this).attr("src", dummyImg);
$(this).fadeIn('slow');
});
}, function () {
var dummyImg = $(this).attr("src");
$(this).fadeOut('slow', function(){
//this is now the callback.
$(this).attr("src", $(this).attr("alt"));
$(this).attr("alt", dummyImg);
$(this).fadeIn('slow');
});
});
});
Maven,
Have you thought of using css webkit? This SO article goes into detail for crossfading images - at different rates. CSS Webkit Transition - Fade out slowly than Fade in
You can also make use of a basic event to fade-in/fade-out the image. This JQuery/JSFiddle SO article makes use of the this reference object: Jquery fadeOut on hover
The basic fade-in / fade-out structure from the JSFiddle.net documention is as follows:
$('#show').hover(function() {
$(this).stop(true).fadeTo("slow", 0);
}, function() {
$(this).stop(true).fadeTo("slow", 1);
});
~JOL
Personaly, I'd layer the two images (css) so the non-hover version is normally on top. Then
in the hover function, add a $(this).fadeOut('fast') so that the underlying image is displayed.
http://jsfiddle.net/Xm2Be/13/ There is an example how you could do that. Ofcourse, you can set lenght of fade effect by placing some number inside brackets. For examle .fadeToggle(5000) will have timing of 5 seconds.
Related
I'm using JS to make a simple function that displays 3 items one at a time. Works well when you're looking at the page, but when you minimize or change tabs then return, all three items are shown.
Anyone know why? It's as if fadeIn(x) keeps running but hide() stops working. I even checked with different classes.
Here is the code:
$(document).ready(function () {
function start() {
$(".featured-items").hide();
$( ".item-1" ).fadeIn('slow');
setTimeout(one, 5000);
}
function one() {
$(".featured-items").hide();
$( ".item-2" ).fadeIn('slow');
setTimeout(two, 5000);
}
function two() {
$(".featured-items").hide();
$( ".item-0" ).fadeIn('slow');
setTimeout(start, 5000);
}
setTimeout(start, 5000);
});
Problem solved, check the best answer below and make sure to read comments to get a good understanding. Thanks to all
(Updated to provide complete answer)
Your original code is too complex, and a more flexible and simpler implementation is to have just one function, and an array of items in the gallery. Secondly, you should modify your code so the fadeIn animation starts immediately instead of getting queued. Having only one function instead of several makes alterations such as this easier.
Note that in the code below, as in your original code, the various gallery items are classes rather than single element ids and could fade in multiple items.
var gallery = [ '.item-1', '.item-2', '.item-3' ];
var i = 0;
function galleryEvent() {
$(".featured-items").hide();
$( gallery[i] ).fadeIn({duration: 'slow', queue: false});
i = (i + 1) % gallery.length;
setTimeout(galleryEvent, 5000);
}
// start everything off....
galleryEvent();
I'm working on a jQuery function that I'm trying to use to cycle through different background images fading in and out. For some reason it is only changing from the default background image to the second one (contact_banner) and then back to the same one again.
Any help would be much appreciated, I'm sure it's something simple but I can't seem to work it out.
$(document).ready(function () {
function slider(){
$('#cover').delay(3000).fadeOut(1000);
$('#cover').css("background-image", "url('images/classes-cover.jpg')");
$('#cover').fadeIn(1000);
$('#cover').delay(3000).fadeOut(1000);
$('#cover').css("background-image", "url('images/contact_banner.png')");
$('#cover').fadeIn(1000, slider);
}
slider();
});
jQuery fade is asynchronous. Use callbacks to fire the next event once the first is done.
$('#cover').fadeIn(1000, function() { $('#cover').fadeIn(1000, ... ); });
Have a look at this fiddle I've prepared for you http://jsfiddle.net/xu7sbofv/.
The important thing to understand is that the function does not block on fadeIn() or delay() because the calls are asynchronous. This is why you must supply callback functions.
Managed to find a solution to this, a bit of a neater implementation too:
var imgSrcs =[
"images/class-banner/running-group_banner2.png",
"images/class-banner/running-group_banner3.png",
"images/class-banner/running-group_banner1.png",
];
$('#cover').delay(1000).fadeIn(1000, animateBackground());
function animateBackground() {
window.setTimeout(function(){
var url = imgSrcs[imgSrcs.push(imgSrcs.shift()) - 1];
$('#cover').delay(4000).fadeOut(1000, function(){
$(this).css("background-image", "url(" + url + ")")
}).fadeIn(1000, animateBackground())
});
}
I have implemented a slideshow using Bootstrap Carousel. As you guys might now, this carousel is pretty basic so I wanted to add some eye candy to it.
Using the animate.css transitions, I wanted to only animate the first slide. I tried
$('.caption-wrapper').addClass('scrollpoint sp-effect3');
setTimeout(function () {
$('.caption-wrapper').removeClass('scrollpoint sp-effect3 animated fadeInDown');
}, 2000);
and it works! However, as you can see, I am adding and removing a class using the setTimeout function (which is kind of weird).
Is there a cleaner way to do this?
So basically, as mentioned by #isherwoord, I used Bootstrap carousel available events, in this case the "slide" event. Here's the answer:
$('#slideshow').on('slide.bs.carousel', function () {
$('.caption-wrapper').removeClass('scrollpoint sp-effect3 animated fadeInDown');
});
This a lot more elegant solution to what I originally had.
Are you looking for something like this:
$(document).ready(function() {
function slider(){
$('.caption-wrapper').addClass('scrollpoint sp-effect3',function(){
setTimeout(function () {
$('.caption-wrapper').removeClass('scrollpoint sp-effect3 animated fadeInDown');
}, 2000);
});
}
setInterval(slider,3000);
});
I am using jCarousel for image slider. I am new to jQuery so from the jCarousel documentation I can't figure out how to apply different animation effects.
Say I have one image at a slice, and I want the view image disappear slowly, and simultaneously the next picture appear in the same place. How can I achieve this effect? Is it a custom animation, that requires to write a new JS function, or it can be done via setting of jCarousel?
Karine, I believe you should use the easing configuration property. http://sorgalla.com/projects/jcarousel/#Configuration
Here you can specify the jquery easing effect you want to use (http://api.jquery.com/animate/). If you need something else you can create a custom animation. Here you can see an example http://sorgalla.com/projects/jcarousel/examples/special_easing.html.
Alternatively, you can obtain the desired effect using this code:
<script type="text/javascript">
function carouselFadeOut(carousel) {
var clipId = carousel.clip.context.id;
$('#' + clipId).fadeOut();
}
function carouselFadeIn(carousel) {
var clipId = carousel.clip.context.id;
$('#' + clipId).fadeIn();
}
jQuery(document).ready(function() {
jQuery('#mycarousel').jcarousel({visible : 1, scroll : 1,
itemLoadCallback: {
onBeforeAnimation: carouselFadeOut,
onAfterAnimation: carouselFadeIn
}
});
});
Hope it helps, Fabrizio
I'm done a bit of reading on here, but I'm posting because I can't seem to figure out specifically what I'm looking to do. I've tried tweaking existing code I've found here, but no such luck. It probably doesn't help that I'm not very well versed in javascript. I'm a recovering flash designer.
Let me explain:
I have 2 divs, one with a very large image, one with text. Ideally I'd like the webpage to function in this manner:
nothing on screen
fade in image div (and I think it might need some time to load first)
fade out image div
nothing on screen (ie: not a crossfade)
fade in text div
leave the image div there permanently.
Any thoughts on how to approach this would be much appreciated! Again, forgive my ignorance.
Since the image could be large, wire up the .load() event on the image which will be fired once the image has loaded successfully. From there just use the callback function in the .fadeOut() and .fadeIn() to show/hide your divs.
$(function() {
$(".image img").load(function() {
$(".image").fadeIn("slow", function() {
$(this).fadeOut("slow", function() {
$(".text").fadeIn("slow");
});
});
});
});
Code example on jsfiddle
$(document).ready(function(){
$('#id-of-img').fadeIn(5000).delay(5000).fadeOut(5000); // 5000 is 5 seconds, change this as you wish
$('#id-of-text').fadeIn(5000);
});
This requires jQuery 1.4.2 or above for the delay() function
-- edit --
Just re-read your question. You say "leave the image div there permanently', did you mean the text div? If so, what I've done should work, if not then I don't really know what you mean.
Using Event Callbacks
You want to load the image in a way that provides a callback when it has finished pre-loading:
var $textDiv = jQuery('.textDiv'); // contains the text
var img = new Image();
img.src = "images/myImageUrl.jpg";
img.onload = function() {
jQuery(this).hide().appendTo('.imgDiv').fadeIn(300, function(){
$(this).fadeOut(300, function() {
$textDiv.fadeIn(300);
}
});
};