I'm using the .fadeTo() jQuery effect on the featured images on wordpress. How I have setup the code is that if the mouse hovers over the image, it fades to 0.7, when the mouse leaves, it fades back to 1:
jQuery(function($) {
$(window).load(function() {
$('.image').mouseover(function() {
$('.image').fadeTo('fast', 0.7);
});
$('.image').mouseout(function() {
$('.image').fadeTo('fast', 1);
});
});
});
The class given is ".image" and I have put it in a div within the wordpress loop on the featured image code likes this:
<div class="image"><?php if ( has_post_thumbnail() ) { the_post_thumbnail(); } ?> <!-- If has featured image, GET --></div>
The problem that I'm running into is that every time I'm hovering over a SINGLE image, it fades ALL images on the page. What I really want is to have it fade the image that my mouse is hovering over, what am I doing wrong?
Since all images have the .image class on them, jQuery is returning all of those images when you hover over any of them.
Try changing the
$('.image').fadeTo('fast', 0.7);
to
$(this).fadeTo('fast', 0.7);
and same for the mouseout event as well.
Here's a quick EXAMPLE to help.
Once you have a mouseover event on that element fired you do not need to call the jQuery selector again.
Using $('.image') you will call all elements with that class and apply the fade to them. If you use this instead then you refer only to the element that has the mouse over it. You can try this instead:
$('.image').mouseover(function() {
$(this).fadeTo('fast', 0.7);
});
$('.image').mouseout(function() {
$(this).fadeTo('fast', 1);
});
Related
I'm using the vimeo api to slide a video off the screen after it finishes playing. Underneath the video player, hidden, I have an image that says 'replay'. The image though is slightly bigger than the player so I want to hide the image via .hide() or display: none in the css and then show it after the animation of the video player completes.
Here's my js:
$(document).ready(function() {
$(".vimeo-container img").hide();
$('iframe.vimeo').each(function(){
Froogaloop(this).addEvent('ready', ready);
});
function ready(playerID){
Froogaloop(playerID).addEvent('finish', onFinish);
}
function onFinish(playerID) {
var player = "#" + playerID;
$(player).animate({width: "0%"}, 750, function() {
$(player).next("img").show();
});
}
});
So the first line is hiding the image. And then when the onFinish function completes I'm trying to show() the image, but it won't work. I should note that when I reverse it and do:
$(player).next("img").hide();
it works.
Here's my HTML:
%section#container1
.row.video-left
.large-8.columns
.vimeo-container
.flex-video.widescreen.vimeo
%iframe.vimeo#player1{allowfullscreen: "", frameborder: "0", height: "225", mozallowfullscreen: "", src: "http://player.vimeo.com/video/60122989?api=1&player_id=player1", webkitallowfullscreen: "", width: "400"}
= image_tag "behind1.png", class: "behind1"
And CSS:
.vimeo-container {
position: relative;
.behind1 {
margin-top: -27em;
}
I've also tried setting display: none in the css, but that wont work either. Not sure what I'm missing.
Thanks.
EDIT
function onFinish(playerID) {
var player = "#" + playerID;
$(player).animate({width: "0%"}, 750, function() {
console.log($(player));
$(player).next().show();
});
}
When I log out ($(player) it returns:
And when I log out console.log($(player).next()); it logs out the image that I am trying to show.
According to the jQuery documentation on the animate method here:
Note: Unlike shorthand animation methods such as .slideDown() and .fadeIn(), the .animate() method does not make hidden elements visible as part of the effect. For example, given $( "someElement" ).hide().animate({height: "20px"}, 500), the animation will run, but the element will remain hidden.
I had a similar need in a project and what worked for me there was to set the z-index of the element I wanted to hide to be less than that of the background. Then, when I wanted to show (or, in your case, animate) I could apply the jQuery methods to the element as if they were hidden (by increasing the z-index so that the element becomes visible), yet not incur the undefined behaviour of attempting to manipulate a hidden element.
Another option would be to move the element off the screen by way of a negative (x, y) coordinate and work from there. I'm not sure which visually would be more appealing in your use case but mention it for completeness.
When I hover over an img which fades to another img and sroll off too fast, the fadeOut gets stuck and the fade stays. I've tried the .stop() as I've seen in other responses, but still won't work. Is there something else I can put instead of the .stop()?
<div class="grid big-square">
<a href="#"><img id="image2" src="img/fade/creo.png">
<img id="image1" src="img/creo.jpg"></a>
</div>
<script>
$("#image1").mouseenter(function () {
$(this).stop(true, true).fadeOut(1000);
});
$("#image2").mouseleave(function () {
$("#image1").stop(true, true).fadeIn(500);
});
</script>
I seem to remember having a similar problem when I was creating this website.
The solution is to use a combination of .hover() and .stop() to ensure that only one animation is running at a time, which I think you have. Also ensure that the mouseover image is on top of the other image, and just fade that one in and out. The image fading out gets 'stuck' because at some opacity the .mouseleave() stops firing and the .mouseenter() starts firing on the other image.
Something like:
$$ = $("#image1");
$$.hover(function () {
$$.stop().animate({
opacity: 0
}, 1000);
}, function () {
$$.stop().animate({
opacity: 1
}, 1000);
});
#image1 must be above #image2 for this to work, #image1 fades out to 'reveal' #image2 behind it. The code uses .animate() rather than .fadeIn() and .fadeOut() but the effect is the same.
Edit- to fade in another div after the end of the fadeoout animation use the complete call back of the animate function.
Something like:
$$ = $("#image1");
$$.hover(function () {
$$.stop().animate({
opacity: 0
}, 1000);
}, function () {
$$.stop().animate({
opacity: 1
}, 1000, function() {
$("#finalDiv").animate({ opacity: 1, 500 });
});
});
#finalDiv needs to be after the 2 <img />s in your html to appear above them.
I'm not sure how you're trying to accomplish this but I do know how it should be done.
Try this http://jsfiddle.net/xy5dj/
Make sure to listen for both events on the same element (preferably a wrapper element).
Take note that fadeOut actually removes the element from the rendered content (display: none) making sure that the mouse events won't fire on that element.
Side note:
A dirty trick that I used once (if you have to do this then you're doing something wrong) is to clear the style of the element after animation using the callback ability of the animate function i.e.
$('el').animate({opacity:0}, 500, function(){$(this).attr('style', '')});
fiddle
You should use the animation/transition in form:
.fadeTo( duration, opacity, complete )
where complete is callback function.
I have a button and an image and want them to change color onmouseover.
The button changes color fine:
<script>
function secondColor(x) {
x.style.color="#000000";
}
function firstColor(x) {
x.style.color="#ffaacc";
}
</script>
<input onmouseover="secondColor(this)" onmouseout="firstColor(this)" type="submit"><br>
How can I do the same thing with the image? Is there any way:
<img src="..." ......
Or do I have to have a second image to replace the first one onmouseover and this is the only way?
If you don't care that much about supporting older browsers, you could use the new CSS3 filter brightness. In chrome, you could write something like this:
var image = document.getElementById('img');
image.addEventListener('mouseover', function() {
image.setAttribute('style','-webkit-filter: brightness(1.5)');
}, false);
image.addEventListener('mouseout', function() {
image.setAttribute('style','-webkit-filter: brightness(1.0)');
}, false);
I don't recommend this approach, though. Using another picture while hovering would be a better solution.
I know that this is old, but you don't need two images. Checkout my example using one image.
You can simply change the position of the background image.
<div class="changeColor"> </div>
JavaScript
var dvChange = document.getElementsByClassName('changeColor');
dvChange[0].onmouseover = function(){
this.style.backgroundPosition = '-400px 0px';
}
dvChange[0].onmouseout = function(){
this.style.backgroundPosition = '0px 0px';
}
CSS
.changeColor{
background-image:url('http://www.upsequence.com/images/multibg.png');
width:400px;
height:400px;
background-position: 0px 0px;
}
.changeColor:hover{
background-image:url('http://www.upsequence.com/images/multibg.png');
width:400px;
height:400px;
background-position: -400px 0px;
}
You can also try changing the opacity of the images onmouseover and onmouseout.
I don't have an example for that, but its super easy to find and I am sure it has be answered already on stack exchange somewhere.
In the JSFiddle below there is Javascript and non-Javascript examples.
http://jsfiddle.net/hallmanbilly/gtf2s8ts/
Enjoy!!
I think you have to use a second image. I recently cam across the following article describing how to do image crossfading on hover using css. Crossfading Image Hover Effect
You can change image SRC on mouse over, you can load two images and use fade effects to "change" them. But better, you can use image as DIV background, make sprite and just move BG on mouse over.
Loading of two different images bring you to disappearing when hover and second image loading. Better do not use JS at all. Make sprite from two images, put it as BG of DIV and write two CSS for DIV, normal and when hover.
If you have access to JQuery use hover function. If you want to change image
$('#imageid').hover(function(){
//change image or color or opacity
$(this).attr('src', newImageSrc);
});
add this function in document ready function.
I'm working on this site: http://mccraymusic.com/newsite/ and I am having trouble figuring how to fade in the navigation bar correctly over the background AFTER the background has faded when clicking "enter site." I know the navigation bar isn't styled yet. I'm pretty sure I have the right code for the navigation to fade in. Just not sure how to make it work so it fades in when I want it.
Thanks
I suspect you need to use a callback in jQuery. Basically, the second function runs AFTER the first has completed.
http://www.w3schools.com/jquery/jquery_callback.asp
Here is a fiddle of it http://jsfiddle.net/YL4p7/
Fadein has a builtin callback, just add you animation into that callback and it will execute after the background has faded in.
also add relative position to #container so that it can be seen over the bg image.
$(function() {
var images = ["black.jpg","bg.jpg"];
$('<img>').attr({'src':'http://mccraymusic.com/newsite/assets/images/'+images[0],'id':'bg','alt':''}).appendTo('#bg-wrapper').parent().fadeIn(0);
$('.move').animate({
top:200,
left:250,
});
$('.entersite').click(function(e) {
e.preventDefault();
var image = images[1];
$('#bg').parent().fadeOut(200, function() {
$('#bg').attr('src', 'http://mccraymusic.com/newsite/assets/images/'+image);
$(this).fadeIn(1000, function() {
$('.navbar').fadeIn(1000);
});
});
$('.move').animate({"left": "-=50px", "top": "-=200px"});
});
});
my image is at some div, and it's z-index is the highest
When i click on something, I want it to fade out, and fade in on another, specified position. Below the image of another class : ) It's an "aaa" class.
I was doing it like that:
$('img.classy').fadeOut();
$('img.classy').css('top',$(el).find('img.aaa:last').height()+60);
$('img.classy').fadeIn();
It's embedded to click event. When I run it and click the area, img.classy FIRSTLY changes it's position, then on new position it fades out and fades in. I want obviously to make it that way: fade out -> change position when invisible -> fadein on new position. how to do it?
This will do:
$('img.classy').fadeOut(function() {
$('img.classy').css('top',$(el).find('img.aaa:last').height()+60);
$('img.classy').fadeIn();
});
Because fadeOut and fadeIn are asynchronous functions, the script continues to run, those causing your img to change its position immediately.
You need to wait until the fadeOut is complete. I added a callback function for you.
$('img.classy').fadeOut('slow', function() {
$(this).css('top',$(el).find('img.aaa:last').height()+60);
$('img.classy').fadeIn();
});
this will clone the img, remove it and append it anothor wrapper:
.aaa {position: relative}
.classy {position: absolute; right:0; top:0}
$('img.classy').fadeOut(
cloned = $(this).clone(true);
$(this).remove();
$("img.aaa:last").append(cloned);
$(".classy").fadeIn();
);