Goal is to have an animation appear on mouseover and disappear on mouseout. Using jQuery within WordPress, hence the no-conflict tags.
What works? FadeTo on hover and adding/removing the additional class. This is happening on a per-item basis.
What doesn't? I've got the new image prepending accurately on hover, but hovering over any img.readmore is firing on all the .entry-content divs. I've tried traversing the DOM to find parent (which I couldn't quite get working) & I've tried using $( $img ).prependTo( $(this) ); which failed too.
I'd appreciate help in a) targeting only the div that is hovered over (primary need), and b) advice on tidying things up for a new JS person.
/*
* Readmore animation
*/
jQuery(document).ready(function($) {
//add readmore class to images (temp, will eventually live in markup)
$(".post-image").addClass("readmore");
//fade original image on hover
$("img.readmore").hover(
function() {
$(this).addClass("readmore-hover").fadeTo( "slow" , 0.1 );
}, function () {
$(this).removeClass("readmore-hover").fadeTo( "fast" , 1 );
}
);
//prepend new image on hover
//what's our img?
var $img = $("<img src='/path/to/readmore_hover.png' style='position: absolute; left: 15%;opacity:0.7 !important' />");
//prepend new image on hover
$("img.readmore").hover(
function() {
$( $img ).prependTo( ".entry-content" );
}),
function () {
// remove img on mouseout;
}
});
This will get the image to prependTo the appropriate div.
$( $img ).prependTo( $(this).closest(".entry-content") );
I'm still working on the remove() function.
I really like Leglaws id selector to remove the image so here it is complete!
<html>
<script
src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
jQuery(document).ready(function () {
//add readmore class to images (temp, will eventually live in markup)
$(".post-image").addClass("readmore");
//fade original image on hover
$("img.readmore").hover(
function() {
$(this).stop();
$(this).addClass("readmore-hover").fadeTo( "slow" , 0.1 );
}, function () {
$(this).stop();
$(this).removeClass("readmore-hover").fadeTo( "fast" , 1 );
}
);
//prepend new image on hover
//what's our img?
var $img = $("<img id='inserted' src='/path/to/readmore_hover.png'" +
"style='position: absolute; left: 15%;opacity:0.7 !important' />");
//prepend new image on hover
$("img.readmore").hover(
function() {
$( $img ).prependTo( $(this).closest(".entry-content") );
},
function () {
// remove img on mouseout;
$('#inserted').remove();
})
});
</script>
<body>
<div class="entry-content">
<a href="http://google.com"><img class="readmore"
style="z-index:2;" src="some_image.png" /></a>
</div>
<div class="entry-content">
<a href="http://yahoo.com"><img class="readmore"
style="z-index:2;" src="some_image.png" /></a>
</div>
<div class="entry-content">
<a href="http://stackoverflow.com"><img class="readmore"
style="z-index:2;" src="some_image.png" /></a>
</div>
</body>
</html>
Add your own images to this.
There was also an error in the //prepend new image on hover functions. The closing brace } on the first function had the closing parentheses ) immediately following it. It should have been at the end of the second function (removing the image).
The flickering as you called it is actually the result of not telling the animation you started with the fadeTo() functions to stop when you have removed the mouse hover. So what's happening is that you are queueing up the animations each time you hover over it. It's easy to check this by just running your mouse over the image several times and let go of the mouse. You'll actually see it go through each of the animations you placed into the queue. stop() is just one of jQuery's animation extras.
For the original images that appear and fade away, you want to set the style to z-index=2;. This keeps the faded out image in front of the new img so you can still do the click-through you mentioned in your comments below.
Now I really believe that this is complete. haha
Awesome!
c0p