This is a very weird bug, my code is most probably correct, since it works in most cases except when mouse is moving around on elements very fast.
Here is my CSS:
<style type="text/css">
.fadeto {
opacity:0.4;
position:box;
}
.selected {
opacity:1.0;
border-style:solid;
border-color:gold;
}
</style>
Here is my html body:
Click over the images to toggle their permanent visibility. Or click here to toggle them all:
Toggle
<div style="margin:50px;">
<img class="fadeto" src="nature.jpg" /><!--you can change the source-->
<img class="fadeto selected" src="nature.jpg" /><!--by default selected, just not to waste time selecting elements-->
<img class="fadeto" src="nature.jpg" />
<img class="fadeto" src="nature.jpg" />
<img class="fadeto" src="nature.jpg" />
<img class="fadeto" src="nature.jpg" />
<img class="fadeto" src="nature.jpg" />
<img class="fadeto" src="nature.jpg" />
</div>
<div id="feedback"></div>
Here is my jQuery script:
<script>
$(document).ready(function(){
$('.fadeto').hover(function(){
$(this).fadeTo(100, 1);
},function() {
if(!$(this).hasClass('selected'))
$(this).fadeTo(100,0.4, function(){
$(this).removeAttr('style'); //removed IF not selected
document.getElementById('feedback').innerHTML +=$(this).attr('style');
});
else {
$(this).removeAttr('style'); //removed IF selected
document.getElementById('feedback').innerHTML +=$(this).attr('style');
}
})
.click(function(){
$(this).toggleClass('selected');
});
$('#Toggle_Button').click(function(){
$('.fadeto').toggleClass('selected');
});
});
</script>
Whenever I move the mouse around the images in normal speed, with no rush, everything works perfectly. But whenever I try and move the mouse over the elements fast, it causes a bug with the Toggle button: Some elements remain with opacity 1.0.
I remove the style attribute after each animation is finished, because I don't want any element to stay with style="opacity:1;", since it would overwrite any conflicting CSS Class Rule that is applied to the element.
I have included the feedback <div>, so that I can keep track whether the style attribute is removed or not, and yes, no matter how fast the mouse moves, the code inside there is executed, and style is undefined.
Also, I know that stylesheets are read from top to bottom, so I have included the 'selected' class after 'fadeto', since its opacity rule has more priority than the other's.
If there is a problem with my code, please help me? Otherwise, what can I do? What do you suggest?
I would strongly suggest hoverIntent when you play around mouse over and mouse out
$(selector).hoverIntent({
over: function(){},
out: function(){},
selector: '.selector'
});
http://cherne.net/brian/resources/jquery.hoverIntent.html
Hope this helps
I had a similar problem before and found that using mouseenter and mouseleave rather than mouseover and mouseout solved the issue
Related
I've been trying to find a way that an image will fade and switch to a different image when the images container is visible and scrolled up a certain amount on screen and changes back when you scroll the element back down.
I found the exact functionality being used on this page: http://www.asicstiger.com/gb/en-gb/knit (the 4th section down under the video). I know you could use a jQuery scrollTop method in some cases and all the examples I've found on stackoverflow so far mention this but it doesn't work on my responsive page as elements move around on the page so the images I wan't to switch aren't always at the same hight from page top.
.top {height:100vh;width:100%; background:red}
.scrollImageSwap {width:100%;}
.scrollImageSwap img {width:100%;}
.scrollImageSwap .image1 {display:block;}
.scrollImageSwap .image2 {display:none;}
.bottom {height:100vh;width:100%; background:red}
<div class="top"></div>
<div class="scrollImageSwap">
<img class="image1" src="https://openclipart.org/image/800px/svg_to_png/19972/ivak-TV-Test-Screen.png" alt="image 1" />
<img class="image2" src="http://www.hertenkamp-enkhuizen.nl/test/wp-content/uploads/sites/7/2015/06/testbeeld.jpg" alt="image 2" />
</div>
<div class="bottom"></div>
Can anyone help?
OP noticed the solution worked, but did not use a fade. I have updated the answer.
You can use jQuery's fadeIn(); and fadeOut(); to achieve this:
$(document).scroll(function(){
if($(this).scrollTop() >= $('.scrollImageSwap').offset().top - 5) {
$(".image1").stop().fadeOut(1000, function(){
$(".image2").stop().fadeIn(1000);
});
}
else {
$(".image2").stop().fadeOut(1000, function(){
$(".image1").stop().fadeIn(1000);
});
}
});
This should work properly, as shown in this fiddle.
I need many images to change when mouse hover on a image.Me try one but its change only one image how can i change many images on hover on image.My try fiddle
HTML:
<div id="container">
<div class="fimg"><img height="130px" width="100%" src="a.jpg" alt="" />
</div> <div class="simg">
<img height="130px" width="100%" src="A.jpg" alt="" /><p class="text_over_image" style="font-size:36px;">TEXT</p>
</div>
Javascript:
$(function(){
$("#container").hover(function(){
$("img", this).stop().animate({top:"-130px"},{queue:false,duration:200});
}, function() {
$("img", this).stop().animate({top:"0px"},{queue:false,duration:200});
});
});
If I correctly understand your problem, you want an image slider when you hover on the container.
The images are in inline-block are they are set to white-space: nowrap. So, that they don't wrap. container is set to overflow: hidden, it hides the extra images.
The images are shown by animating the margin-left of the inner div. So, it is like the inner container is moving but the container stays still.
You can modify it however you like, vertical animation, using css transitions and stuff.
I cannot post the code here because of the shortened url of the images.
You can test and modify it here, it's a pen.
I want to change z-Index on button click. I have a static image and a dynamic div. Now I want to send the #imgDiv1 behind the static image. But I don't know how to do this. I tried everything but all in vain.
Here is the live demo. jholo.com I want to implement this concept in this web application.
Here is my mark up
<div id="safeZone">
<img src="default.png" />
<div id="imgDiv1">
<img src="myPic.jpg" />
</div>
</div>
<input id="back" type="button" value="Send To Back"/>
<input id="front" type="button" value="Bring To Front"/>
jQuery
$(document).ready(function(){
$("#back").click(function(){
$("#imgDiv1").css("z-index","-10");
});
$("#front").click(function(){
$("#imgDiv1").css("z-index","10");
});
});
The z-index style property only takes affect on elements that are not position: static. So, you will need to set the position property before you can see the impact of z-index.
HTML:
<button id="up">Up</button><button id="down">Down</button>
<div id="container">
<img id="img1" src="http://dummyimage.com/300x200/ff0000/fff.jpg">
<img src="http://dummyimage.com/300x200/00ff00/fff.jpg">
</div>
CSS:
#container img {position: absolute;}
#container {height: 200px; width: 300px;}
Code:
$("#up").click(function(){
$("#img1").css("z-index", -10);
});
$("#down").click(function(){
$("#img1").css("z-index",10);
});
Working demo: http://jsfiddle.net/jfriend00/5Efm3/
Edit - Responding to your additional edit:
To achieve the effect you're looking for, you will also need the snowflake like image to have transparency inside the snowflake shape thus allowing the behind image to show through which means it can't be a JPG,. It could be GIF or PNG.
I used opacity instead of z-index... is that helpful?
$("#down").click(function(){
$("#img1").css("opacity", 0.0);
$("#img2").css("opacity", 1.0);
});
$("#up").click(function(){
$("#img2").css("opacity",0.0);
$("#img1").css("opacity", 1.0);
});
the js fiddle link is.. http://jsfiddle.net/6rwBR/ hopefully this helps
I make an image gallery. I have 9 fields, in each field there is an image (or better, there is a part of image). In total, I have 9 big images and in each of that fields there is a 1/9 of each big image.
When I "hover" one of these nine fields, I need to change the other fields to the rest of this image and see the whole image over all fields.
Okay, this I am able to make with CSS and a little bit of JS, but I am looking for any javascript/jQuery effect, let´s say to change image by image from right top corner to left bottom corner, any fluently change between images.
Example, with 3 images:
HTML:
<img onmouseover="show_image('r');" rel="1" src="" class="r">
<img onmouseover="show_image('r');" rel="1" src="" class="r">
<img onmouseover="show_image('b');" rel="2" src="" class="b">
<img onmouseover="show_image('g');" rel="3" src="" class="g">
<img onmouseover="show_image('b');" rel="2" src="" class="b">
<img onmouseover="show_image('g');" rel="3" src="" class="g">
<img onmouseover="show_image('r');" rel="1" src="" class="r">
<img onmouseover="show_image('b');" rel="2" src="" class="b">
<img onmouseover="show_image('g');" rel="3" src="" class="g">
CSS:
img {float: left; width: 30%; height: 100px; margin: 0 9px 9px 0;}
img:nth-child(3n+3) {margin-right: 0;}
.g {background: #070;}
.b {background: #00f;}
.r {background: #f00;}
JavaScript:
function show_image(id) {
$('img').removeClass().addClass(id).removeAttr('onmouseover');
}
(fiddle)
Do you have any idea how to make the fluent change of images when hover one of them?
In HTML there should be all 27 small images, it´s no problem, I´m looking for the switching effect. You can send links for examples, maybe I only don´t know how to call what I need :-)
Thanks.
Ok, I understand your question now!
You mean, when you hover over on an image, the rest of images get replaced by its remaining parts and whole of the 9 images match up to complete the image?
You need to set these functions!
Try to remove the onmouseover function from the element, and try to use jQuery for that!
Lets start the example!
The example image tag:
<img src="some/source/to_file.png" alt="photo" class="image5" id="red" />
First you need to get the image on which the mouse over event occured, like this:
$('img').mouseover(function () {
var id = $(this).attr('id');
var class = $(this).attr('class');
if(id == 'red') {
if(class == 'image5') {
/* replace all the other images with red one
* here you will check the image's class too, which is the number
* location where it is present at!
*/
}
}
}
After this, you will need to shift the image's back too! For that, use this:
$('img').mouseleave(function () {
// shift the src tag back as
$('.image5').attr('src', 'its/src/to_file5.png');
$('.image7').attr('src', 'its/src/to_file7.png');
$('.image6').attr('src', 'its/src/to_file6.png');
}
And so on.
And yes, you will be needed to keep the images in the browser as downloaded files on the page load and just keep shifting them once the user hover's over!
In your fiddle, all you're doing is adding a classname but you are not removing or reverting it back on mouseleave event; there is no mouseleave event.
You can use the jQuery UI switchClass() method which allows you to animate whole class.
Here is a working code sample using your as basis:
function show_image(id) {
$('img').each(function() {
var className = this.className;
if (className == id)
className = '';
$(this).removeClass().switchClass(className, id, 1000, 'linear').removeAttr('onmouseover');
});
}
Since it's removing one class and add other, if the one you remove and add is the same it won't work hence the need to check and reset.
As for "linear" it's just my personal choice of easing method, choose your own from the full list.
Updated fiddle.
Firstly I have to say I have no coding experience whatsoever, but will try to explain what I am trying to acheive.
I have the following code with 2 images... blue.png is a color image
bluebw.png is the same image in black and white. Code simply changes images on mouse over.
<script type='text/javascript'>
$(document).ready(function(){
$(".blue").hover(function() {
$(this).attr("src","files/blue.png");
}, function() {
$(this).attr("src","files/bluebw.png");
});
});
</script>
<a href="page-1.html">
<img src="files/bluebw.png" alt="dresses" class="blue" height="300" width="170" />
What I would like to do is the following:
add the option for fade in/out on mouseover of the 2 images (fast/slow/or none)
add display text on mouse over with fade in/out on mouseover (fast/slow/or none) after the image fade, format text (font/alignment/top bottom center/background/opacity)
I'm really flying in the dark here :) Any help would be immensely appreciated.
Cheers
Try this:
Suppose you have an HTML structure like this:
<div id="element" style="position:relative;">
<img src="image1.gif" id="img1" />
<img src="image2.gif" id="img2" style="display:none" />
</div>
and css :
img {
position:absolute;
top:0;
left:0;
}
jQuery code:
$("#element").hover(function() {
//fadeout first image using jQuery fadeOut
$("#img1").fadeOut(200);
//fadein second image using jQuery fadeIn
$("#img2").fadeIn(200);
}, function () {
//fadeout second image using jQuery fadeOut
$("#img1").fadeIn(200);
//fadein first image using jQuery fadeIn
$("#img2").fadeOut(200);
});
Here is a fiddle for demo
Or you can use css3 transition:
Here is a fiddle using css3 and jQuery.hover as fallback for ie