Im creating a nav that uses jquery to replace the image on rollover. Here is the code I am using:
http://peps.ca/blog/easy-image-rollover-script-with-jquery/
basically, you add a suffix (_o) to the filename and when you rollover the src, jquery replaces it with the (_o).png. I want to add fade so when there is a rollover, the transition isn't instant, rather there is a quick, elegant fade. Any ideas?
$('#the_image).hover(function() {
$(this).fadeOut(function() {
$(this).attr('src', $(this).attr('src').replace(".png", "_o.png")).fadeIn();
});
}, function {
$(this).fadeOut(function() {
$(this).attr('src', $(this).attr('src').replace("_o.png", ".png")).fadeIn();
});
});
rather than replace, you'll have to overlay a new image and fade it in, waiting till the transition has completed.
something like...
$('.my_img').parent().append($('.my_img').clone().attr('src','my_img_o.jpg').fadeIn('slow'))
assuming the element is absolutely positioned
You could layer a second (hidden) element over the top of your default image, then see about fading that one in and out with a rollover.
Related
When I click a certain link I want the background-image to fadeOut, change to another image and then fadeIn.
The code I have:
$('.link').on('click',function(){
var image = $(this).data('image');
$('#div-with-the-bgimage').css('background-image', 'url('+image+')');
})
I tried this:
$('.link').on('click',function(){
var image = $(this).data('image');
$('#div-with-the-bgimage').fadeOut('3000').fadeIn('3000').css('background-image', 'url(' + image + ')');
})
but this didn't work, what am I doing wrong? (I'm new to jQuery)
EDIT:
I solved this with Rory McCrossan answer:
$('.link').on('click',function(){
var image = $(this).data('image');
$('#div-with-the-bgimage').fadeOut('3000', function() {
$(this).css('background-image', 'url('+image+')').fadeIn('3000');
});
});
But now this fadesOut to a white background and and then fadesIn to the image, giving a sensation of a flash? Is there a way to load the image before?
You need to chain the fades by calling the fadeIn after the fadeOut has completed. You can do this by using the callback function parameter. Try this:
$('.link').on('click',function(){
var image = $(this).data('image');
$('#div-with-the-bgimage').fadeOut('3000', function() {
$(this).css('background-image', 'url('+image+')').fadeIn('3000');
});
});
Wouldn't it be much simpler if you append / remove a div with the image you want and not change anything in the background? Just an example:
<div data-image="some-other-image.jpg" class="appendhere" style="position:relative">some content and an image background here</div>
Now using jQuery, you may put the image in the above data attribute on top, with 0 opacity, fade it in and out:
$('.link').on('click',function(){
var image = $(this).data('image');
var appendcode = '<div class="appended" style="display:none;position:absolute;width:200px;height:200px;overflow:hidden"><img src="' + image + '"></div>';
$('#div-with-the-bgimage').append(appendcode);
$('.appended').css({'opacity': 0, 'display':'block', 'z-index': 999}).fadeIn('3000', function() {
$(this).fadeOut('3000');
});
});
I used some inline styles there to point you need to make the wrapper relative positioned and the appended absolute positioned and with a higher z-index, you can make it much more elegant by including these in your CSS of course.
U can combine animate and opacity or use fadeOut and fadeIn functions.
Check out this link jsfiddle to see a working example using fadeOut and fadeIn.
U can also specify a unique img tag with data-gallery attribute storing multiple url's for images to toggle between all of them. Check this other link jsfiddle to see a working example. Click on the button Toggle to change the image.
Hope it useful!
This is my code:
$('.items').html(response).hide().fadeIn();
The problem is that when this loads, the page "jumps" up due to the element being rendered on page first (having a height) before the .hide().fadeIn() is triggered.. is there some other way to do this?
You could using the opacity instead if you want to keep the dimensions of the element intact:
$('.items').html(response).css({'opacity':0}).animate({'opacity':1});
Hide using CSS and then fade it in when required :
css :
.items {
display:none;
}
JavaScript
$('.items').html(response).fadeIn();
This is a cleaner solution since it avoids a flashing effect of the element being added first, then quickly having its opacity set to 0.
This way the elem is added already having an opacity of 0.
var elem = $(response).css({'opacity': 0});
$('.items').html(elem);
elem.animate({'opacity': 1});
If you want to show a smooth transtion between existing content and new, try the following:
$(function(){
$('.items').fadeOut(function(){
$(this).html(response).fadeIn();
})
});
I need to change my background div with some other images.
I want that first, myDiv load the first background image on css style, and then within 2/3 seconds of delay add a fade effect change the background image.
If it's possible, I need to do this with jQuery.
You cannot do fade or any other transitions directly on the background image. You can however add another div with second image as its background and fadeOut() the original one.
Does this do what you you want?
http://jqueryfordesigners.com/image-loading/
EDIT: A bit more Googling - this sounds like what you are trying to do...
http://www.magneticwebworks.com/jquery-rotating-page-background/
Edit: another go - THis? http://css-tricks.com/forums/discussion/9621/solved-is-it-possible-to-add-jquery-cycle-to-background-imagess/p1
this is not fade effect but you can delay and change background image like this.
function changebackground(){
$('#divID').css("background-image", "url(/myimage.jpg)");
}
setTimeout(function() { changebackground();}, 3000);
this might be good workaround
http://jquery.malsup.com/cycle/
after you position on top divs with cycle it can be your background - cycle.js give's you lot of options.
if you want only rotate image's in bacground you must first preload that image and second you must put it in other div so that both divs can animate.
There is no support for this, even if you add all the functionality of jQuery UI.
You could append a temporary image, absolutely positioned inside the div for which u want to change background. Let the image fade in, and once it's fully opaque, swap background image for the div. This will be problematic if you have a repeated background, however.
var im1 = 'picture1.png';
var im2 = 'picture2.png';
$('#divID').css({'background-image': 'url("'+im1+'")', 'position': 'relative'});
$('#divID').on('click', function() {
var img = $('<img />', {
src: im2,
}).css({
position: 'absolute',
top: 0,
left: 0
}).hide();
$(this).append(img);
img.fadeIn('slow', function() {
$(this).parent().css('background-image', 'url("'+im2+'")');
$(this).remove();
});
});
Of course, you should move the CSS I included in my script to a .css file, and use a class instead, for more readable code.
all.
I have.
<div id="imagecontainer" class="header-image-container"> </div>
BG image are specified in css for ich page according on parent class.
.category-1 #imagecontainer {
background: url(_/images/1.jpg);
}
And i have menu. I want to chage BG image ommouse over, and on mouse out return image specified in css for this page according on parent class. I think it could be real using JQuery. For example we have opened category-3 page and move mouse on category-1 menu item and see catefory-1 BG image in #imagecontainer, and then we move mouse out see again category-3 BG image.
I think this will do you want:
$('#menu').mouseenter(function() {
$('#imagecontainer').css({'background':'blue'});
}).mouseleave(function() {
$('#imagecontainer').removeAttr('style');
})
You can see it in action here: http://jsfiddle.net/Cdzk8/
If you have other inline styles on your imagecontainer, it will also remove those on mouseleave. In that case, you will have do something more like what mblase75 is recommending.
Store the current background image as data before swapping it out, and retrieve it from there when you want to swap it back.
$('#imagecontainer').mouseover(function() {
$(this).data('bgimg') = $(this).css('background-image');
$(this).css('background-image','url(my/new/url.jpg)');
}).mouseout(function() {
$(this).css('background-image', $(this).data('bgimg'));
});
I am using a giant sprite for an element that changes different states at hover. I was wondering if there was a way to have the hover state image fade in? You can view my code live - here
Here's my code for the hover state for each span
$(".hf-1").hover(
function () {
$(this).css("background-position","0 -121px");
$(".hf-2").css("background-position","0 -242px");
$(".hf-3").css("background-position","0 -363px");
$(".hf-4").css("background-position","0 -484px");
},
function () {}
);
I am using Jquery to do the background image hover instead of basic css cause i have multiple hovers that need to be reset.
Thanks for any help.
Use something like this:
$(this).animate({"background-position": "0 -121px"}, "slow");
Rinse and repeat for the other three.
You would need to double-stack the backgrounds and fade from to the other. Won't be able to fade within the same container.
Or you can just use jquery's native fadeIn API.
$(this).click(function () {
$("this").fadeIn("slow");
});