I want to create a webpage that works for js and none-js visitors. For js-visitors the start image shall fade in, so it has to be hidden before. At the moment it is hidden too late, namely when the js has loaded. I cannot hide it by default , because in this case none-js visitors will not see it. Any ideas?
HTML
<div class="startImage">...</div>
JS
$('.startImage').hide().delay(200).fadeIn(200);
You should just use css to fade the div in then.
.startImage {
animation: fadein 2s;
-moz-animation: fadein 2s; /* Firefox */
-webkit-animation: fadein 2s; /* Safari and Chrome */
-o-animation: fadein 2s; /* Opera */
}
#keyframes fadein {
from {
opacity:0;
}
to {
opacity:1;
}
}
#-moz-keyframes fadein { /* Firefox */
from {
opacity:0;
}
to {
opacity:1;
}
}
#-webkit-keyframes fadein { /* Safari and Chrome */
from {
opacity:0;
}
to {
opacity:1;
}
}
#-o-keyframes fadein { /* Opera */
from {
opacity:0;
}
to {
opacity: 1;
}
}
Working JSFiddle -
http://jsfiddle.net/bpzpb00q/
CSS
.startImage {
display:none;
}
HEAD
<noscript>
<style>.startImage {display:block}
</style>
</noscript>
JS
$(document).ready(function() {
$('.startImage').fadeIn(200)
});
in this case <noscript> tag would be useful, add 2 same elements and and one warp with <noscript> tag and another element with css properly display:none
<noscript>
<div class="startImage">...</div>
</noscript>
<div class="startImage forJS" style="display:none">...</div>
And target <selector> $(".startImage.forJS")
<script>
$(function(){
$('.startImage.forJS').delay(200).fadeIn(200);
})
</script>
Use the <noscript> tag for the non JavaScript users and duplicate its content for the JavaScript users.
To the duplicated content add a class modifier like .hidden to set it to display: none by default. Apply your fadeIn function to it.
If you don't like the duplication you could have the JavaScript take the content from the <noscript> tag create a DOM element from it and inject it into the page.
$(function() {
$('#box').delay(200).fadeIn();
});
.box {
width: 300px;
margin: 0 auto;
border: 1px solid #c66;
background-color: #f99;
color: #fff;
font-size: 24px;
padding: 24px;
font-family: Helvetica, Arial;
text-align: center;
}
.hidden {
display: none;
}
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<noscript>
<div class="box">Content</div>
</noscript>
<div id="box" class="box hidden">Content</div>
I would consider using the <noscript> tag, like so:
$(window).load(function() {
$("#startImage img").css("opacity", "1");
});
#startImage img {
-webkit-transition:all 0.5s ease-in-out;
-moz-transition:all 0.5s ease-in-out;
-ms-transition:all 0.5s ease-in-out;
-o-transition:all 0.5s ease-in-out;
transition:all 0.5s ease-in-out;
}
<noscript>
<style type="text/css">
#startImage img {
opacity: 1;
}
</style>
</noscript>
<style type="text/css">
#startImage img {
opacity: 0;
}
</style>
<div id="startImage">
<img src="http://www.gettyimages.co.uk/CMS/StaticContent/1391099215267_hero2.jpg" alt="Hero2" />
</div>
Even though it doesn't seem to work when you run the code snippet, the following demo should work in the 5 major browsers.
if you are using the fadeIn(200) to the "startImage" class
then there is no need to hide the selector as well as not need to give delay
so
that above method is right try it
Related
Here is my script so far:
Html:
<head>
<link rel="stylesheet" type="text/css" href="mystyles.css">
</head>
<body>
<div id="test"></div>
</body>
</html>
Css:
#test {
background-color: blue;
width: 100px;
height: 100px;
}
/* Here is the animation (keyframes) */
#keyframes fading {
0% { opacity: 1; }
100% { opacity: 0; }
}
But how do i get the css animation (keyframes) to play on the div #test using some javascript?
Try to add 'animation' css property from js:
document.getElementById('test').style.animation = 'fading 2s infinite'
Add the animation to a class in CSS.
.fade {
animation: fading 1s forwards; // "fading" is the keyframe animation you created
}
[forwards][1] makes it so the element remains in the final state of the animation.
Then in Javascript when you want to animate your div, add the class to the element.
var el = document.getElementById('test'); // get a reference to the targeted element
el.classList.add('fade'); // add the class name to that element
document.getElementById('fader').addEventListener('click', function() {
var el = document.getElementById('test');
el.classList.add('fade');
});
#test {
background-color: blue;
width: 100px;
height: 100px;
}
.fade {
animation: fading 1s forwards;
}
/* Here is the animation (keyframes) */
#keyframes fading {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
<div id="test"></div>
<button type="button" id="fader">fade out</button>
You have to add the animation keyframe fading to the div.
Have a look at this
#test {
background-color: blue;
width: 100px;
height: 100px;
position: relative;
-webkit-animation: fading 5s infinite;
animation: fading 5s infinite;
}
/* Here is the animation (keyframes) */
#keyframes fading {
0% { opacity: 1; }
100% { opacity: 0; }
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyles.css">
</head>
<body>
<div id="test"></div>
</body>
</html>
.cube {
width:40px;
height:40px;
background:#000;
animation:spin 3s;
animation-iteration-count:infinite;
}
#keyframes spin {
from {
transform:rotate(0deg);
}
to {
transform:rotate(360deg);
}
}
<div class="cube"><div>
Like this give youre animation name like me(spin) and use this variable in animation selector with css. :)
You just declared the animation and did not used. You have to call it with "animation" keyword:
#test {
background-color: blue;
width: 100px;
height: 100px;
animation: fading 1s;
}
There is no need to use JS when you use #keyframes css
To add the #keyframes faded animation to the div just add those additional 2 lines to #test css . This will create 5s animation
#test {
background-color: blue;
width: 100px;
height: 100px;
-webkit-animation: fading 5s; /* Safari 4.0 - 8.0 */
animation: fading 5s;
}
You can add 'infinite' to loop the animation
-webkit-animation: fading 5s infinite; /* Safari 4.0 - 8.0 */
animation: fading 5s infinite;
I am sure my problem is pretty easy to solve. I want to apply fade in when my header became visible and fadeout when it isn't visible. So i don't want to be that rough. I tried with header.removeClass('clearHeader').addClass("darkHeader").fadeIn(slow); but that didn't help me. I also tried to add transitions in CSS but that didn't help me too.
Javascript:
$(function() {
//caches a jQuery object containing the header element
var header = $(".clearHeader");
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 50) {
header.removeClass('clearHeader').addClass("darkHeader");
} else {
header.removeClass("darkHeader").addClass('clearHeader');
}
});
});
CSS:
header {
width:100%;
height: 70px;
position: fixed;
z-index:999;
background-color:#fff;
box-sizing:border-box;
}
header nav {
display:inline-block;
float:right;
line-height:70px;
}
header nav a {
margin-left: 25px;
font-weight: 700;
font-size: 18px;
}
header nav a:hover {
text-shadow:1px 1px 1px red;
}
.clearHeader{
display:none;
opacity:0;
width: 100%;
-webkit-transition:all 1s ease-in-out;
-moz-transition:all 1s ease-in-out;
-o-transition:all 1s ease-in-out;
-ms-transition:all 1s ease-in-out;
transition:all 1s ease-in-out;
}
.darkHeader {
display:visible;
opacity:1;
z-index:999;
}
CODE PEN
try by remove opacity and display visible code from css and try fadeIn and fadeOut Like:
if (scroll >= 50) {
header.removeClass('clearHeader').addClass("darkHeader").fadeIn('slow');
} else {
header.removeClass("darkHeader").addClass('clearHeader').fadeOut('slow');
}
To solve your problem you can simply use jQuery's animate. Here's the syntax and explanation. It smoothly animates any css property you would want to animate. Therefore you can do:
CSS:
header {
opacity:1;
}
(just sets the default)
JS:
header.animate({opacity: "0"}, 500);
To fade out, and the same thing but with opacity 1 to fade in. You may want to comment out the display part of your classes for testing though, as it may influence how it all behaves.
I have an image slider that is flickering the previous image RIGHT after it slides to the next image. For some reason it is only doing this in google Chrome though. The slider setup is a Div with three separate images sitting side by side, and their location is translated with a jquery transition so that a different image is displaying. You can view this, and the flickering at www.cutephilosophy.com. (The slider is normally on auto-run but I turned that off for this question, just click the next or previous button to see the flickering).
CSS W/ JQUERY TRANSITION-
.slider{
width: 960px;
height: 450px;
float:left;
}
p#slide1_controls {
text-align:center;
}
#slide1_controls span {
padding-right:2em;
cursor:pointer;
}
#slide1_container {
width:690px;
height:400px;
float: left;
overflow:hidden;
/*margin:0 auto;*/
}
#slide1_images {
float:left;
width:2070px;
-webkit-transition: all 500ms cubic-bezier(0.505, 0.010, 0.455, 0.980);
-moz-transition: all 500ms cubic-bezier(0.505, 0.010, 0.455, 0.980);
-ms-transition: all 500ms cubic-bezier(0.505, 0.010, 0.455, 0.980);
-o-transition: all 500ms cubic-bezier(0.505, 0.010, 0.455, 0.980);
transition: all 500ms cubic-bezier(0.505, 0.010, 0.455, 0.980);
/*-webkit-transition:all 2.0s easeInOutQuad;
-moz-transition:all 2.0s easeInOutQuad;
-o-transition:all 2.0s easeInOutQuad;
transition:all 2.0s easeInOutQuad;*/
}
#slide1_images img {
padding:0;
margin:0;
float:left;
}
.slider{
float:left;
width: 960px;
height: 400px;
overflow: hidden;
cursor:pointer;
}
JAVASCRIPT (Functions for next/previous/autorunning/sliding) -
var $selectedSlide=1;
//var autoSlider = setInterval(nextSlide, 5500);
function nextSlide() {
if ($selectedSlide!=3) {
$("#slide1_images").css("transform","translateX("+-690 * ($selectedSlide)+"px)");
$selectedSlide=$selectedSlide+1;
//window.alert("SelectedSlide = "+$selectedSlide);
}
else {
$("#slide1_images").css("transform","translateX(0px)");
$selectedSlide=1;
}
}
function prevSlide() {
//clearInterval(autoSlider);
if($selectedSlide>1) {
$("#slide1_images").css("transform","translateX("+-690 * ($selectedSlide-2)+"px)");
$selectedSlide=$selectedSlide-1;
}
else{
$("#slide1_images").css("transform","translateX(-1380px)");
$selectedSlide=3;
}
}
HTML -
<div class="sliderPrev">
<img src="images/SliderImages/SliderPrevBtn.gif" onmouseover="this.src='images/SliderImages/SliderPrevBtnRollover.gif'"onmouseout="this.src='images/SliderImages/SliderPrevBtn.gif'" onClick="prevSlide();"/>
</div>
<div id="slide1_container" class="shadow" align="left">
<div id="slide1_images" class="hover">
<img src="images/SliderImages/SliderOne.jpg" class="noBorder"/>
<img src="images/SliderImages/SliderTwo.jpg" class="noBorder"/>
<img src="images/SliderImages/SliderThree.jpg" class="noBorder"/>
</div>
</div>
<div class="sliderNext">
<img src="images/SliderImages/SliderNextBtn.gif" onmouseover="this.src='images/SliderImages/SliderNextBtnRollover.gif'"onmouseout="this.src='images/SliderImages/SliderNextBtn.gif'" onClick="nextSlide();"/>
</div>
Unfortunately I don't have a direct answer to your question, but I wanted to let you know that I use Google Chrome, and I don't see the flickering on your site. I see a smooth transition from one image to the next.
Is it possible that you have an extension installed that's interfering in some way?
Here's the version string from the browser: Version 29.0.1547.57 m
I'm running on Windows 7
I have two divs. One is applied the rotate effect and another would trigger by clicking.
$(function() {
$("a").click(function() {
$("#d1").addClass(".spinEffect");
});
});
#d1,
#d2 {
width: 100px;
height: 100px;
background-color: red;
margin: 50px 50px 50px 50px;
}
#d2 {
background-color: green;
-webkit-animation: spin 10s infinite linear;
}
.spinEffect {
-webkit-animation: spin 0.5s 1 linear;
}
#-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="d1">
</div>
<div id="d2">
</div>
<a href=#>click me</a>
Here is the demo page. I know the problem should be in js, could someone tell me how to modify it?
It's working when I remove the .
But when I click the link, it only work once. How can I fix that?
You have an error near your addClass, you should put $("#d1").addClass("spinEffect"); and not ".spinEffect", the . is useless there ;)
For your second question, just add infinite in your css
.spinEffect{
-webkit-animation: spin 0.5s infinite linear;
}
EDIT
If you want the box to turn once every time you click on the button you can achieve it with the following method
$(function(){
$("a").click(function(){
var $d1 = $("#d1"); //little optimization because we will use it more than once
$d1.removeClass("spinEffect");
setTimeout(function(){$d1.addClass("spinEffect")},0);
});
});
You may ask why the setTimeout, it's because otherwise, the class is re-added to quickly for the CSS to trigger the effect ;)
all you have do is just remove the '.' from class name in js
JS:
$(function(){
$("a").click(function(){
$("#d1").addClass("spinEffect");
});
});
You can actually do this entirely in CSS and eschew the javascript completely (assuming the target browsers support the :target pseudo-class)
:target selects whichever element has the ID specified by the hash portion of the url, for example: http://localhost/#d1 would be the URL after clicking the link in this answer.
Note I realized that this means the animation would only happen once. So if this was for a situation where the link could be clicked multiple times, definitely go with the JS solution (though I think you'll have to remove the class and add it again to re-trigger the animation)
HTML:
<div id="d1">
</div>
<div id="d2">
</div>
click me
CSS:
#d1, #d2{
width: 100px;
height: 100px;
background-color: red;
margin: 50px 50px 50px 50px;
}
#d2{
background-color: green;
-webkit-animation: spin 10s infinite linear;
}
/* or #d1:target */
:target{
-webkit-animation: spin 0.5s 1 linear;
}
#-webkit-keyframes spin {
0% {-webkit-transform: rotate(0deg);}
100% {-webkit-transform: rotate(360deg);}
}
my context
HTML
<div class="cart">
<div class="black"></div>
</div>
JS
var whiteEl="<div class="white"></div>";
//I would like to replace black with white, flip animation.
$(".cart").empty().append(whiteEl);
whiteEl.addClass("flipanim");
css
#-webkit-keyframes flip{
from{
-webkit-transform: rotateY(0deg);
}
to {
-webkit-transform: rotateY(180deg);
}
}
/*
similar cross browser code*/
.flipanim{
-webkit-animation: flip 1s 1;
-moz-animation:flip 1s 1;
-o-animation:flip 1s 1;
animation:flip 1s 1;
-webkit-transition: all .5s;
-moz-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
I am using key frame animation for show transform animation.
and in javascript adding class to attached element.
my animation not working.
How can I add the new element with flip animation to ".cart"?
try this
$(".cart").html('').append(whiteEl);
//since you have already appended the created div here.. you can use class selctor.
$('.white').addClass("flipanim");
You don't need to remove any content for that and also don't need Javascript for it:
html-markup:
<div class="container">
<div class="cart">
<div class="black">Black side</div>
<div class="white">White side</div>
</div>
</div>
css:
.cart div {
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
}
.cart .black {
background:#111;
color:white;
}
.cart .white {
-webkit-transform: rotateY(180deg);
color: black;
background: #eee;
}
Now you can apply your effects simply with:
.container:hover .cart {
-webkit-transform: rotateY(180deg);
}
See the Demo