I have a thumb nail inside another div, when the thumbnail is hovered I want the parent div to fade/transition to the background of the thumbnail, then fade back to the original image after hover.
I have this so far which changes the parent background to that of the thumbnail and back but with no transition.
$(document).ready(function() {
var originalBG;
var hoverBG;
$(".alt-img").hover(
function () {
originalBG = $(this).parent().css('backgroundImage');
hoverBG = $(this).css('backgroundImage');
$(this).parent().css('backgroundImage',hoverBG);
},
function () {
$(this).parent().css('backgroundImage',originalBG);
}
);
});
There is no 'build-in' solution for fading in/out a backgroundImage, but you may play around with chaining animate()
.animate({opacity: 0.5}, 1000)
for instance. Or use .css() aswell to just set a new opacity level.
Based on what jAndy suggested I was able to come up with this:
$(document).ready(function() {
var originalBG;
var hoverBG;
$(".alt-img").hover(
function () {
originalBG = $(this).parent().css('background-image');
hoverBG = $(this).css('background-image');
//$(this).parent().css('background-image',hoverBG);
$(this).parent().animate({opacity: 0.1}, 200,
function () {
$(this).css('background-image',hoverBG);
$(this).animate({opacity: 1}, 200);
}
);
},
function () {
//$(this).parent().css('background-image',originalBG);
$(this).parent().animate({opacity: 0.1}, 200,
function () {
$(this).css('background-image',originalBG);
$(this).animate({opacity: 1}, 200);
}
);
}
);
});
Its not a true cross-fade because it fades the original image out, then fades the new image in. But a close compromise.
Related
Have a look at the following JQuery code:
function my_hover()
{
$( "#up,#down" ).hover(
function() {
$("#up").animate({
"background-color": "#020306"
});
$("#down").animate({
"background-color": "#171716"
});
},
function() {
$("#up").css("background-color","#C8CACF" );
$("#down").css("background-color","#FAFAF8" );
}
);
}
There are two divs: #up,#down which I cannot wrap into a parent div(due to design restrictions). What I want to do is to animate the change in background color whenever #up or #down are being hovered. However, in case the mouse leaves one div by going directly to the other(the two divs are stuck together vertically) I do not want the last two lines of the above code being applied. I want them to be applied only when mouse hovers out from both divs. How may I achieve that? At users.sch.gr/ellhn you may see what is happening with the above code in the first left rectangle with the target photo (transition between up and down provokes change of color and that's not desirable).
Thank you
Try this.
HTML
<div id="up">Up</div>
<div id="down">down</div>
CSS
div{ transition:all 0.25s ease-in-out;}
#up{background:#C8CACF;}
#down{background:#FAFAF8;}
#up.up-hover{background-color:green;}
#down.down-hover{background-color:yellow;}
Script
$('#up, #down').mouseenter(function(){
//alert('hi')
$("#up").addClass('up-hover');
$("#down").addClass('down-hover');
})
.mouseleave(function(){
//alert('hi')
$("#up").removeClass('up-hover');
$("#down").removeClass('down-hover');
});
Fiddle Demo
Using the technique #nnnnn alluded to, e.g., using a timeout:
(function init() {
var $up = $('#up'),
$down = $('#down'),
hovered = false;
$up.hover(over, out);
$down.hover(over, out);
function over() {
hovered = true;
$up.css({
"background-color": "#020306"
});
$down.css({
"background-color": "#171716"
});
}
function out() {
setTimeout(function to() {
if (!hovered) {
$up.css("background-color", "#C8CACF");
$down.css("background-color", "#FAFAF8");
}
}, 1000);
hovered = false;
}
})();
http://jsfiddle.net/TudqT/3/
And with the elements inline next to each other, instead of vertically aligned:
http://jsfiddle.net/TudqT/5/
I'm trying to find a way to animate the image title and caption for each slide of a slideshow and sync their animation effects with the ones of the slideshow. i.e. as soon as the slide transition effect has ended, the title goes from right to left and the caption from top to bottom, and when the slide transition effect kicks in, the whole text would fade out at the same time the slide fades out, and let the new slide and text fade in.
I figured out how to make my image title and caption move using .animate ( http://jsfiddle.net/S8F9Y/ ) :
var $j = jQuery.noConflict();
$j(document).ready(function() {
// Get the slideshow options
var $slidespeed = parseInt( meteorslidessettings.meteorslideshowspeed );
var $slidetimeout = parseInt( meteorslidessettings.meteorslideshowduration );
var $slideheight = parseInt( meteorslidessettings.meteorslideshowheight );
var $slidewidth = parseInt( meteorslidessettings.meteorslideshowwidth );
var $slidetransition = meteorslidessettings.meteorslideshowtransition;
var $captionduration = $slidetimeout - ($slidespeed*2);
$j('.meteor-slides h1').delay($slidespeed).animate({left: '30',opacity: 1}, 600, function(){/*Animation complete.*/});
$j('.meteor-slides p').delay($slidespeed + 200).animate({top: '70',opacity: 1}, 600, function(){/*Animation complete.*/});
$j('.meteor-slides h1').delay($captionduration).animate({opacity: 0}, $slidespeed, function(){/*Animation complete.*/});
$j('.meteor-slides p').delay($captionduration - 200).animate({opacity: 0}, $slidespeed, function(){/*Animation complete.*/});
// Setup jQuery Cycle
$j('.meteor-slides').cycle({
cleartypeNoBg: true,
fit: 1,
fx: $slidetransition,
height: $slideheight,
next: '#meteor-next',
pager: '#meteor-buttons',
pagerEvent: 'click',
pause: 1,
prev: '#meteor-prev',
slideExpr: '.mslide',
speed: $slidespeed,
timeout: $slidetimeout,
width: $slidewidth
});
// Setup jQuery TouchWipe
$j('.meteor-slides').touchwipe({
wipeLeft: function() {
$j('.meteor-slides').cycle('next');
},
wipeRight: function() {
$j('.meteor-slides').cycle('prev');
},
preventDefaultEvents: false
});
// Add class to hide and show prev/next nav on hover
$j('.meteor-slides').hover(function () {
$j(this).addClass('navhover');
}, function () {
$j(this).removeClass('navhover');
});
// Set a fixed height for prev/next nav in IE6
if(typeof document.body.style.maxWidth === 'undefined') {
$j('.meteor-nav a').height($slideheight);
}
// Add align class if set in metadata
$j('.meteor-slides').each(function () {
meteormetadata = $j(this).metadata();
if (meteormetadata.align == 'left') {
$j(this).addClass('meteor-left');
} else if (meteormetadata.align == 'right') {
$j(this).addClass('meteor-right');
} else if (meteormetadata.align == 'center') {
$j(this).addClass('meteor-center');
}
});
});
The 1st problem is that there's no cycle so the text animation only
plays once,
the 2nd problem is that text effects are not in sync with slide effects,
the 3rd problem is that there's no slide transition for the first slide so if this is the first slide, the text animation should start right away for h1 and +200ms for p, with no additional delay ($slidespeed).
Thanks in advance,
Kim
Use the callback of each slide instead of trying to sync them by time.
$j('.meteor-slides').cycle({
after: function (currSlideElement) {
// Place all your animations here
// Example:
$j(currSlideElement).find('h1').animate();
// ...
},
cleartypeNoBg: true,
fit: 1,
fx: $slidetransition,
height: $slideheight,
next: '#meteor-next',
pager: '#meteor-buttons',
pagerEvent: 'click',
pause: 1,
prev: '#meteor-prev',
slideExpr: '.mslide',
speed: $slidespeed,
timeout: $slidetimeout,
width: $slidewidth
});
Place any captions and animations where it says // Place all your animations here and they will show after each slide has loaded.
You can also use before depending on what's best suited for your slideshow.
Demo here
Find more about how they are used here.
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/
Hi I'm new to JQuery. I have an two issues that I can't figure out. I'm using copy and past code as I'm on a tight deadline.
1) When I hover over a link it doesn't fade back to the original color once I move my mouse away from the link.
2) If I move my mouse rapidly over the links they get stuck in a loop and fade in and out over and over... I know I should be able to use stop() but not sure if thats what I need.
// JavaScript Document
$(document).ready(function() {
//Grab the original BG color of the link
var originalBG = $("#nav li a").css("background-color");
//The color you want to fade too
var fadeColor = "#FFFFFF";
//Now animate on links with class = animate
$("#nav li a").hover(
function() {
$(this)
//Fade to the new color
.animate({backgroundColor:fadeColor}, 350)
//Fade back to original color
.animate({backgroundColor:originalBG}, 350)
},
function(){
}
);
});
update: from suggestions - Resolved some of my issues, but now some times if you hover over a link it doen't fade.
// JavaScript Document
$(document).ready(function() {
//Grab the original BG color of the link
var originalBG = "#351411";
//The color you want to fade too
var fadeColor = "#FFFFFF";
//Now animate on links with class = animate
$("#nav li a").hover(
function() {
//Fade to the new color
$(this).stop().animate({backgroundColor:fadeColor}, 350)
},
function(){
//Fade back to original color
$(this).stop().animate({backgroundColor:originalBG}, 350)
}
);
});
Doesn't work because the .css("background-color") returns in another color format, some like this: "rgb(18, 52, 86)".
Try this :
$("#nav li a").hover(
function() {
//Fade to the new color
$(this).animate({backgroundColor:fadeColor}, 350)
},
function(){
//Fade back to original color
$(this).animate({backgroundColor:originalBG}, 350)
}
);