How do you add a fadeIn - fadeOut transition to a swap image - javascript

I found out all sorts of ways of adding a nice fade transition to a rollover image, but none actually say how to apply the script to an html document
this is what I've got so far.. how can I add a fadeIn, fadeOut script to that? instead of just flicking from image to image
<img src="images/portfolio.jpg" alt="" width="155" height="150" id="portfolio"
onmouseover="MM_swapImage('portfolio','','images alt/index-alt_12.jpg',1)"
onmouseout="MM_swapImgRestore()" />
Here's the whole part in the HTML doc.
<td colspan="2" rowspan="5" align="left" valign="top"><a href="portfolio.html"><img src="images/portfolio.jpg" alt="" width="155" height="150" id="portfolio" onmouseover="MM_swapImage('portfolio','','images alt/index-alt_12.jpg',1)"
onmouseout="MM_swapImgRestore()" /></a></td>
how do I isolate the 'index-alt_12.jpg' and create an ID tag for it? and where do I put that code?

Since you are using mouseover and out, I assume you have only two images right?
You can do this without javascript. It will still work in older browsers, but the animated fades will work only on webkit, ie10 and mozilla. Its only an issue if you must have this fade on older versions of IE.
What you can do is place two images, with one on top of the other.
For example - assuming this are positioned one on top of the other through css
<img class="imageA" src="a.jpg" />
<img src="b.jpg" />
On the css
.imageA {
-webkit-transition: all 300ms ease;
-moz-transition: all 300ms ease;
-o-transition: all 300ms ease;
transition: all 300ms ease;
opacity: 1;
}
.imageA:hover {
opacity: 0;
}
You can use the transitions to animate from any one css property to another as well.
Instead of two images, the one below could also be a background image of the container as suggested below, yet still do it purely through css.

Are you using jQuery at all? If so, there's a nice solution for you! At the bottom of your HTML page (under where you include jQuery), you could use something like the following:
$(document).ready(function() {
$("#portfolio").mouseover(function() {
$("#img1").fadeTo(200, 1);
// The above means take 200ms to fade to an opacity of 1.0 (fully opaque).
$("#img2").fadeTo(200,0);
// The above says the same thing, but for fading out
});
});
If you play around with this a little, you can get them to switch back and forth depending on which is showing, but that's the general idea.
And voila! I know you're looking for a javascript answer, but jQuery is extremely helpful for stuff like this, and would highly recommend it to you.

There are bugs around the way you are trying to do it with a hard coded image, but you can switch to CSS as a workaround.
First, I would set up a div and make portfolio.jpg the background image:
HTML:
<div id="portfolio"></div>
The CSS:
#portfolio {
background:url('images/portfolio.jpg') no-repeat;
height: 150px;
width: 155px;
}
Here's a way to fade #portfolio out on mouseover, swap in a new background image, then fade the div back in. Requires jQuery 1.0+
$('#portfolio').mouseover(function() {
var self = $(this);
self
.fadeOut('slow', function() {
self
.css('background-image', 'url("images alt/index-alt_12.jpg")')
.fadeIn('slow');
});
});

Related

zoomIn effect (Animate.css) has quick flash of the element before it disappears and zooms in

I have an image that I wanted to zoomIn on page refresh. The image is located at the very top of the page. When you open the page from another webpage the image is there for a split second, disappears and then zooms in as the element is supposed to. How do I get the appearance for the split second to not show at all and just have the image zoomIn from 0 opacity?
Here is my code for this project:
#keyframes zoomIn {
from {
opacity: 0;
-webkit-transform: scale3d(0.3, 0.3, 0.3);
transform: scale3d(0.3, 0.3, 0.3);
}
100% {
opacity: 1;
}
}
.zoomIn {
-webkit-animation-name: zoomIn;
animation-name: zoomIn;
}
<div class="Header-Image-Container rellax">
<img src="images/Calibrator_Logo_Text_NoBackground.png" alt="Header Picture" class="Header-Image
wow zoomIn" data-wow-duration="3s" />
</div>
Here is a link to the actual site where I am having the issue: www.calibrator.ca/TestSite. I am just trying to have the image start from a 0 opacity and then zoom to a 1. To me it looks as if the css code would accomplish this but when it renders in chrome and firefox it has this flash of the image before it disappears. Any help is appreciated.
If there is any delay at all between the painting of the loaded image and the start of the animation (likely), the image will be visible for a short amount of time, causing the flash you see. A solution is to style the image with visibility: hidden at the start, and then set visibility to visible as the first frame of your animation (or use JavaScript to make it visible). (You could alternatively initially style the image to opacity: 0 but then you might also see a non-scale3d'd image for a split second at the beginning, so you'd need to style that initially as well; probably easier just to start with visibility: hidden.)
By the way, with your code as written, you also risk the animation occurring before the image has loaded (something you might not notice with a fast connection and cached image). If that happened, your animation would essentially be invisible to users. A solution would be only to add the animation class (zoomIn) to your image after the image's load event has fired. (Ideally you'd attach a load handler to the image using addEventListener(), but you could also keep it simple and use an onload attribute directly in your <img> tag.)

Animation transitions behave differently for ng-hide-remove and ng-hide-add

I am trying to animate a <div> to slide-in/out from the left on a button click. I am using the angular framework and ng-showto control the <div> display/visibility, and adding transitions to the ng-hide set of styles.
I have successfully managed to have the div slide in from the left, however I can not get it to slide out (it simply dissappears after the specified delay). I have tried modifying several examples online to get the behavior I am after to no avail.
JSFiddle for anyone that wants to have a look
https://jsfiddle.net/mquinlan/0wcrcwxe/5/
You got that almost right except for removing the left:0 in the selectors for .animate-show.ng-hide-add.ng-hide-add-active, .animate-show.ng-hide-remove.ng-hide-remove-active.
.animate-show.ng-hide-add.ng-hide-add-active,
.animate-show.ng-hide-remove.ng-hide-remove-active {
-moz-transition: all ease 0.5s;
transition: all ease 0.5s;
}
Updated Fiddle: https://jsfiddle.net/vsj62g5r/

JQuery hover function opacity animation

trying to animate a divs opacity when hovering some other element. First I tried it with display none/block, but it read somewhere it's impossible to make a transition for that.
This is a little complicated, because this is supposed to work on each element of the same type with a different id the same. (Picture gallery with a caption to appear on the bottom of the img element when the picture is hovered.)
The HTML structure is like this:
<article id="{PostID}">
<div class="post-content">
<a><img></a>
<div class="post-content--padded">
<p>Caption of the picture.</p>
</div>
</div>
</article>
First I went with a mouseover, mouseout approach added to the post-content div which looked like this:
onmouseover="document.getElementById('{PostID}').getElementsByClassName('post-content--padded')[0].style.opacity='1.0';" onmouseout="document.getElementById('{PostID}').getElementsByClassName('post-content--padded')[0].style.opacity='0.0';"
That worked, but there was no transition. I've set the CSS up with transition handlers to apply to all the css changes within post-content--padded like so:
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
This doesn't seem to affect the mouseover, mouseout opacity change I do, so I tried adding .animate() to that, without much success. Well I got post-content to fade in and out, but not post-content--padded
Different approach
That all didn't work so much. So I tried using the JQuery function hover().
Long story short I added this above the html in question:
<script type="text/javascript">
$(document).ready(function(){
$('#{PostID}.post-content').hover(
function(){ $('#{PostID}.post-content.post-content--padded').stop().animate({'opacity': '1'}, 'slow');},
function(){ $('#{PostID}.post-content.post-content--padded').stop().animate({'opacity': '0'}, 'slow');}
);
});
</script>
This just doesn't want to work though. Endless browsing of stackoverflow and other sources didn't seem to help me with this. Being stuck on this for over an hour I decided to simply ask. It cannot be that hard to add a hover > opactiy transition.
Hope I've not been clear and people understand my issue here.
you can do it just using css if you need only on hover
.post-content--padded{
opacity: 0;
-webkit-transition: all 2s;
-moz-transition: all 2s;
transition: all 2s;
}
.post-content:hover .post-content--padded{
opacity: 1;
-webkit-transition: all 2s;
-moz-transition: all 2s;
transition: all 2s;
}
see demo HERE
and if you want to use Jquery
$('.post-content--padded').hide();
$('.post-content').hover(function(){
$(this).find('.post-content--padded').fadeToggle(2000);
});
see demo HERE
I also worked on combining hover with animate and it worked like that:
in CSS opacity for "a" = 0
and in jQuery:
$("#classy").hover(function(){
$("#classy").animate({
opacity:"1"
},200);
}, function(){
$("#classy").animate({
opacity:"0"
},200);
});
Here is a jQuery method that works:
HTML
<div id='hover-me'>hover over me</div>
<div id='change-me'>I change opacity</div>
CSS
.hide {
opacity:0;
}
JS
$('#hover-me').hover( function() {
if ($('#change-me').hasClass('hide')) {
$('#change-me').removeClass('hide', 'slow');
} else {
$('#change-me').addClass('hide', 'slow');
}
});
jsFiddle Demo
*This is with jQueryUI included

How to make a div that scrolls down from top when user clicks link?

I would like to write some JS that allows me to recreate the effect this website achieved when you click on the links:
Heydays.no
If you visit this link then click one of the small icons in the upper right corner of the page, you will see the desired effect that I want to achieve with js. I assume this is some kind of hidden or repositioned div that has a js action.
Help would be much appreciated,
Thanks Ryan.
It's not really scrolling from top it is bringing the div into view using animation. There are several JS libraries out there that can help you with this without you writing your own.
Look into JQuery and Scriptaculous. Both have great examples you can look at.
That site uses JQuery.
Basically what you have there is a hidden div which contains some information and has had jQuery method .hide() called on it . When the user mouses over one of those links, the div is then called using the jQuery method .show(). Their version is done with custom scripting.
You could do this with CSS3 transitions:
#sliding_div {
/* must have a set height to work */
-webkit-transition: height 2s ease;
-moz-transition: height 2s ease;
-o-transition: height 2s ease;
transition: height 2s ease;
}
With a div like so:
<div style="height: 0px;" id="sliding_div"><!-- content --></div>
<div onclick="var sliding_div = document.getElementById('sliding_div'); if (sliding_div.style.height == '0px') sliding_div.style.height = '300px'; else sliding_div.style.height = '0px';"><img /></div>
Keep in mind that only IE10 would generate the slide effect here as IE9 and below don't presently support transitions afaik. The button would just cause the div to "snap" open and closed in these browsers.

Slow transition to hover state with Javascript

I am working on css in which when mouse hovers on images, it gets bigger. e.g.
#image-div img { width:100px; height:100px;}
#image-div:hover img { width:200px; height:200px;}
Now i want it to be animated a little. Like it shall zoom in slowly, and on mouse out, it shall zoom out slowly. Please help.
Note: I am not very well familiar with javascript.
These animations are typically done with Javascript. Rather than writing the Javascript by hand, it is probably easier to use the jQuery library, which includes the ".animate()" method. The animate method requires you give the destination css properties as parameters, like so:
(Since you wrote you are not familiar with Javascript, I've included everything you need to include the jQuery library)
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">google.load("jquery", "1.6.4");</script>
<script type="text/javascript">
$(document).ready(function(){
$("#image-div img").live({mouseenter:myfin,
mouseleave:myfout});
});
function myfin () {
$(this).animate({height: 200, width: 200},1000); //1000 = 1 second animation
}
function myfout () {
$(this).animate({height: '', width: ''},1000); //1000 = 1 second animation
//setting the height and width to '' will clear the inserted style, leaving you with your original style
}
</script>
Then all you should need is to set the height and width to 100px in your CSS, and remove the #image-div:hover definition.
If you would like to animate using class definitions in your CSS file, you can do so using a jQuery plug-in. See the following question for help on that:
jQuery.animate() with css class only, without explicit styles
If you don't need to support older browsers you could use the CSS3 transition attribute. It does not require any javascript and works on Safari, Firefox, and Opera. http://www.w3schools.com/css3/css3_transitions.asp
#image-div img {
width:100px;
height:100px;
transition:all 1s ease-in-out
-moz-transition:all 1s ease-in-out;
-webkit-transition:all 1s ease-in-out;
-o-transition:all 1s ease-in-out;
}
#image-div:hover img {
width:200px;
height:200px;
}
Look into the .animate() method and pair it with .hover(). This will allow you to apply a specific transition when the mouse is hovered over a specific element, in this case zoom, as desired.

Categories