Fade two images with different delay - javascript

I'm trying to fade 2 different images on the same page with a different delay. The first image appears and then the second one appears.
Here's my fiddle :http://jsfiddle.net/jarod51/4RvWY/3/
the css:
.panel img {
opacity:0;
-moz-transition: opacity 3000ms ease-in-out;
-webkit-transition: opacity 3000ms ease-in-out;
transition: opacity 3000ms ease-in-out;
}
.shown img{
opacity: 1;
}
.img2{
opacity:0;
-moz-transition: opacity 10000ms ease-in-out;
-webkit-transition: opacity 10000ms ease-in-out;
transition: opacity 10000ms ease-in-out;
}
.shown1 img2{
opacity: 1;
}
the html :
<div id="home" class="panel">
<h2>Home</h2>
<img src="http://lorempixum.com/200/200/people/3"/>
<img class="img2" src="http://lorempixum.com/200/200/people/1"/>
</div>
my jquery attempt:
$('#wrap').find('.shown').removeClass('shown');
$target.addClass('shown');
$('#wrap').find('.shown1').removeClass('shown1');
$target.addClass('shown1');

There's a couple of things you may fix to get it working:
1) You're missing a dot (.) before the img2 in the .shown1 img2 rule. You're referring to a class and not to an HTML tag. That must be like this:
.shown1 .img2{
opacity: 1;
}
2) If you want to apply a delay to the CSS transition, you can specify it after the duration in the shorthand transition property, or in the transition-delay property. For example, for a 2s delay you can use:
.panel .img2{
opacity:0;
-moz-transition: opacity 10000ms 2s ease-in-out;
-webkit-transition: opacity 10000ms 2s ease-in-out;
transition: opacity 10000ms 2s ease-in-out;
}
See it in action here: http://jsfiddle.net/FL3RK/2/
Anyway, IMHO it would be nicer if you use the same duration (3000ms or 3s) for both transitions.
EDIT: If you don't want to wait for the animation to be completed to start it over again, put the transition property in your .shown1 .img2 rule like this:
.shown1 .img2{
opacity: 1;
-moz-transition: opacity 3000ms 2s ease-in-out;
-webkit-transition: opacity 3000ms 2s ease-in-out;
transition: opacity 3000ms 2s ease-in-out;
}
Working fiddle: http://jsfiddle.net/FL3RK/3/

var finished = 0;
var callback = function (){
// Do whatever you want.
finished++;
}
$(".div"+finished).animate(params, duration, null, callback);

html
<img src="http://lorempixum.com/200/200/people/2"/>
<img src="http://lorempixum.com/200/200/people/1"/>
<img src="http://lorempixum.com/200/200/people/2"/>
<img src="http://lorempixum.com/200/200/people/4"/>
css
img {display:none;}
script
$("img").each(function(i) {
$(this).fadeIn(2000*(i+1));
});
see the fiddle http://jsfiddle.net/vishnurajv/px7U5/

Related

how do you rotate an image at a 40degree angle from left to right?

I am trying with jQuery or js to get an image rotate left to right constantly after upload (no button).
Try this hope it will be helpful.
const img = document.getElementsByTagName("img")[0]
img.addEventListener("load", function(){
img.classList.remove('rotateRight');
img.classList.add('rotateLeft');
});
img{
heigth :200px;
width : 200px;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ;
}
.rotateRight{
transform: rotate(-40deg);
}
.rotateLeft{
transform: rotate(40deg);
}
<div>
<img class ="rotateRight" src='https://www.w3schools.com/w3css/img_fjords.jpg'/>
</div>

javascript display image on screen with animation

I'm a beginner in javascript and I stumbled upon this problem.
This is a part of markup from site i'm working on:
<div class="row">
<div class="col-lg-12">
<div id="target">
<div id="bgDiv">
<img src ="someurl">
</div>
</div>
</div>
</div>
It's a part of a simple bootstrap layout. What i want to do is to animate the #target div so that the image fills the whole browser screen on mouseover , preferably using pure javascript. If I do it with this function:
function(){
var target = document.getElementById('target');
function FullScreen {
target.style.cssText ='position:absolute;top:0;bottom:0;left:0;right:0;z-index:999'
document.body.appendChild(target);};
target.addEventListener('mouseover', FullScreen)};
It does the job of displaying the image covering whole browser window, but I'm cluless how to make the "fill" animation. I tried experimenting with transitions, but i think since i change the 'position' property and append the element to body it does not work.
I would be grateful for any help or suggestions.
As Portal_Zii already mentioned, you can easy create animations without javascript using CSS3 properties only like:
transition
animation
With this knowledge its quiet simple to implement an hybrid solution with CSS3 transition property, the onmouseenter and onmouseleave event.
Try to run the Code and re-size the window.
var myDiv = document.getElementById("myDiv");
var myImg = document.getElementById("myImg");
myDiv.onmouseleave = shrinkImage;
myDiv.onmouseenter = growImage;
function shrinkImage() {
myImg.style.width = 50 + "px";
myImg.style.height = 50 + "px";
}
function growImage() {
myImg.style.width = window.innerWidth + "px";
myImg.style.height = window.innerHeight + "px";
}
img {
width: 50px;
height: 50px;
transition: all 0.7s;
}
<div id="myDiv">
<img id="myImg" src="data:image/gif;base64,R0lGODlhMAAwAOMAANTS1Ozq7Nze3PT29Nza3PTy9OTm5Pz+/NTW1Ozu7OTi5Pz6/P///wAAAAAAAAAAACH5BAEAAAwALAAAAAAwADAAAAT+kMlJq72YnUDMymAoMgUCAMWorqQJBGy8LMc1EKcSr4sgwJYbAEHYqQInxMBywA1rxlDCJfhUBCaENZppngAG6MTwXXJB02yKkhgCEmfQJknYkr6GOGgg+AbEA1kCegdiFAcFSQhrGlSGOyUvA48MCklVEwgmBGZRfUMCjBNCJ3kSlkOdRmRfCH+HAVlKEmSaojsLsUkAoWIHqLwfbUNwZwcJTkkJW4FZf5FghHxZQwqdbVkDQgjFhGmKCTULlrYHAwbhehQFWK0eDHwAnHHmlBq5Liec5gWTZws4EAhIMIBGhWlu5qmb8gVUgGViFhhwsUhdCzcNiShYJgFRH0z+FiUSoNjwxI8CNAxanIDIgAJq1EDdWtnRXIJ2u0rZo8mygAEsznaGKEQ0BqIABt7VLDTipgAFjI497KfyAlMJNxUoDIHkBCNgGQk8DfBQW9WuKEag7fYpJkY3mggwQjvzQlduE9DmfNtKQY0DE72OCPyGpc2kPrCM1JTP1Bxiat10s7pA24AECZAaCGAFsIvJGe6CHlG04926Fgh341egtevX/fr507BWbZZuumDCLVlRQ63CImpLyFey1W4Bf0/bhkxL026+cIsB/oK6gi7gDBZkRoo0wWZ04B+mo019OV56rHpz/Uzo5QlVGRgKpEG0vv379dklgY+BlDwBYgUw6INYACZm4IAAXmIHCLkV5+CDGQ1RHROE6UYSdLtQNJ4K2r3E2IcghhiiAQUIJUEEADs="
/>
</div>
You can describe all of the target's element properties in the class 'over' of css and describe an animation through transition on properties of position of your element. Then when you this class 'over' to element with id=target.
function FullScreen {
target.style.classList.add('over')};
I think all you need to do is add transition styles in your css:
#target {
-webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
}
Additionally you could accomplish this in just using css no?
#target {
DEFAULT:STYLES;
-webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
}
#target:hover {
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
margin:0;
padding:0;
z-index:999;
-webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
}

How do I change the opacity of an image?

<script type="text/javascript">
$(document).ready(function(){
$('#logo').mouseenter(function() {
$('#logo').fadeTo("fast",0.3);
});
$('#logo').mouseleave(function() {
$('#logo').fadeTo("fast",1)
});
});
</script>
I made this to change the opacity of an image while hovering over it with the cursor, but this doesn't happen. :(
You don't need jQuery for that, you can use CSS:
Example HTML - you need it to have the ID logo.
<img id="logo" src="http://upload.wikimedia.org/wikipedia/commons/thumb/8/84/Example.svg/200px-Example.svg.png" />
CSS
#logo {
opacity: 1;
filter:alpha(opacity=100);
transition: opacity 0.2s linear 0s;
-webkit-transition: opacity 0.2s linear 0s;
}
#logo:hover {
opacity: 0.3;
filter:alpha(opacity=30);
transition: opacity 0.2s linear 0s;
-webkit-transition: opacity 0.2s linear 0s;
}
http://jsfiddle.net/pFEdL/2/
What does you HTML look like for your image? Is it embedded in other divs?
SO: Jquery mouseenter() vs mouseover()
As gilly3 states in the question above, "Each time your mouse enters or leaves a child element, mouseover is triggered, but not mouseenter".

jQuery toggleClass - can't animate or give it a transition

I'm having a small issue with my code. I have an element that when the page scrolls it will appear. However, I cannot get it to "appear" in a smoother way. I have tried CSS transitions and attempted fadeIn but neither work. It always just "jumps" in, I cannot get it to ease in.
Here is the code:
$(window).on("scroll", function () {
$('.navbar').toggleClass('visible', $(document).scrollTop() > 40);
});
So it appears just fine, but I can't figure out how to animate adding the class name.
This is the CSS btw:
.navbar {
visibility: hidden;
}
.navbar.visible {
visibility: visible;
}
visibility can't be animated with CSS transitions.
But you can do :
.navbar {
opacity: 0;
transition: opacity .5s ease; // Feel free to use prefixes.
}
.navbar.visible {
opacity: 1;
}
CSS transition / animations is surely the best way to animate something in 2014. You should avoid fadeToggle() and others jQuery animation methods.
instead of using toggleClass, use fadeToggle. it will do everything for u as far as CSS..
give it a try, just fadeToggle();
Here is the example of your code with correct css transition. You cannot animate visibility, but you can play with position and opacity.
http://jsfiddle.net/xZ6fm/
.navbar {
position: fixed;
top: -100px;
left: 0; right: 0;
padding: 12px;
opacity: 0;
background: #ccc;
}
.navbar.visible {
top: 0;
opacity: 1;
-webkit-transition: top 0.3s linear, opacity 0.7s linear;
-moz-transition: top 0.3s linear, opacity 0.7s linear;
transition: top 0.3s linear, opacity 0.7s linear;
}
As indicated in the other answer, fadeToggle() will get the work done for you. And frankly, it's probably the easiest way to accomplish such an effect.
CSS transitions require the transition property. Place this block of code in each of your CSS declarations:
transition: visibility .25s linear;
-webkit-transition: visibility .25s linear;
-moz-transition: visibility .25s linear;
-o-transition: visibility .25s linear;
If you have difficulties with visibility, try using opacity instead.

Setting CSS ease-in, not easing

Setting the text colour of an ID with CSS transitions isn't working. It just changes it to red, but doesn't ease it.
document.getElementById('colourword').innerHTML =
"<span id='flash' style='color: #000; transition: color 0.5s ease-in 0.5s; -moz-transition: color 0.5s ease-in 0.5s; -webkit-transition: color 0.5s ease-in 0.5s;'>X</span>";
var flash = document.getElementById('flash');
flash.style.color = "#dd0000";
If I type in the console document.getElementById('flash').color = "000"; It will then fade black.
Any ideas?
Its like a instant change on the color and it dosen't know what to change color from
This works for me:
document.body.innerHTML =
"<span id='flash' style='color: #000; transition: color 0.5s ease-in 0.5s; -moz-transition: color 0.5s ease-in 0.5s; -webkit-transition: color 0.5s ease-in 0.5s;'>X</span>";
setTimeout(function() {
var flash = document.getElementById('flash');
flash.style.color = "#dd0000";
},0);

Categories

Resources