Hi i am trying to get a piece of text to fade in and out automatically without a click or hover method.
i'm not sure i can use an on page load function either because the text i want to fade in and out only appears after a user clicks to open another div on the page.? (I may be wrong?)
I am using this script but the text is static and not doing anything. Can anyone advise me where i'm going wrong? Thanks
<script>
function cycle() {
$('#morebutton-pics').fadeOut(1000, function() {
$('#morebutton-pics').fadeIn(1000);
cycle();
});
}
$(document).click(function(){
cycle();
});
</script>
This sounds like it would be better as a CSS animation:
#morebutton-pics {
animation: pulse 1s alternate infinite;
-webkit-animation: pulse 1s alternate infinite;
}
#keyframes pulse {
from {opacity:1}
to {opacity:0}
}
#-webkit-keyframes pulse {
from {opacity:1}
to {opacity:0}
}
This will work in Firefox, Chrome and IE10. Since this is more eye-candy than a required feature, that seems acceptable to me.
Notwithstanding that CSS is probably the better answer, your code doesn't work because it repeatedly calls cycle() without ever waiting for the second animation to finish.
function cycle() {
var $el = $('#morebutton-pics');
$el.fadeOut(1000, function() {
$el.fadeIn(1000, cycle); // loop in the second callback
});
}
replace
$(document).click(function(){
cycle();
});
with
$(document).ready(function() {cycle(); });
if the div is hidden it does not matters
Related
Using Unveil (https://luis-almeida.github.io/unveil/) a lightweight js lazy load plugin.
The site features an example of a callback. I am using it just fine, but would like to add an additional animation to the opacity.
I am not a coder (front end designer) so all that I've tried is basically just a hack and slash attempt at adding another 'this.style' line.
The current script is as follows:
$("img").unveil(200, function() {
$(this).on("load", function() {
this.style.opacity = 1;
});
});
I am hoping someone can show me how to add another call to load another CSS effect to the above script yet keep the opacity as well. I would like to add the following CSS animation alongside the opacity that's currently being used.
img {
animation: 1s ease-out 0s 1 slideIn;
}
#keyframes slideIn {
0% {
transform: translateY(-10%);
}
100% {
transform: translateY(0);
}
}
To add a new CSS effect, you don't need to add a new callback. You can add all CSS effects right after the other. All the effects that you give will run one by one in a sequential manner.
You could do something like this:
$("img").unveil(200, function() {
$(this).on("load", function() {
this.style.opacity = 1;
this.style.animation = "1s ease-out 0s 1 slideIn"
});
});
I've searched a lot in google to find a way to animate a text on my HTML site with the help of JavaScript.
So my idea is when someone opens my website I want to zoom a text element to create a pop out effect to visualize that this text is interactive with the mouse (Clickable, changeable, whatever...).
Do you know if there exists a function which can animate my text this way? I just want to show this effect once so I don't want to repeat it. This is the text I want to animate:
<p class="info-text">Das ist mein Text welcher einen Pop-out effect benötigt</p>
Solution
Big thanks to Nikita! This is the working solution:
.my-text {
animation: pop 0.4s ease-in-out;
animation-delay: 1s;
}
#keyframes pop {
50% {
transform: scale(1.25);
}
}
<p class="my-text">Hello everyone :)</p>
If you want to pop animation exactly when page loads, just add a class for the element with text. And in CSS write needed animation. And after the page loads, the popup animation will play and play once.
<div class="pop"></div>
<div class="pop with-delay"></div>
and add styles (if you want to add some delay, in css/styles add "animation-delay"):
.pop{
animation: pop 0.25s ease-in-out;
}
.with-delay {
animation-delay: 1s;
}
#keyframes pop{
50% {
transform: scale(1.25);
}
}
Here's example:
https://codepen.io/anon/pen/jQGBdm
it is called onload method : you cando something basic like this
<!DOCTYPE html>
<html>
<body onload="myFunction()">
<h1 id="title">Hello World!</h1>
<script>
function myFunction() {
alert("Page is loaded");
//example
document.getElementById("title").style.color = "blue";
}
</script>
</body>
</html>
or you can use jquery
$( document ).ready(function() {
//change the css
});
this is the basic way,
but next time you need to show examples of things that you've tried before when you ask a question
I'm building a simple blinking div, it blinks every 3s:
.timer { opacity: 1; animation: blink 3s alternate infinite; }
#keyframes blink { to {opacity: .25;} }
and it's text content is updated every 3s as well, counting down from 50 to 0:
var number = 50;
window.setInterval(function countdown(){ $('.timer').text(number--); }, 3000);
However for some reason my animation and JQ slowly become out of sync, you'll notice it after a few animations have run through. I'm wondering how I could go about assuring that they keep in time with each other.
JS Fiddle:
https://jsfiddle.net/rourkemclaren/61ry4s1j/3/
Thanks in advance.
The issue is related to the CSS alternate flag. If you remove it the effect becomes more streamlined.
Note that you can also listen to the CSS animation events using JavaScript instead of using the setInterval:
$('.timer').on('animationiteration', function() {
$(this).text(--number);
});
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
I have a page where I want all my images to fade in once they have loaded, but separately, and I have it working fine using the following...
<style>
img.imgfade {display:none;}
</style>
<script>
$(document).ready(function() {
$('img.imgfade').load(function() {
$(this).fadeIn('slow');
});
});
</script>
The problem I have here, is after navigating away from the page, and then coming back again, the images are no longer there. This is probably because they are already stored in the browser cache, and so are already loaded before my javascript runs.
I've been researching this all afternoon, but can't find an alternative where the images load and fade in seperately. One method I found says to include an .each() function to the .load(). This each can check if an image is already complete and if so just manually call .load() but when I add it, the images don't even load the first time round.
<script>
$(document).ready(function() {
$('img.imgfade').load(function() {
$(this).fadeIn('slow');
});.each(function() {
if(this.complete) {
jQuery(this).load();
}
});
</script>
SOLVED: The question was solved below, so I am sharing my full code incase it helps anyone else. This will fade in your images one at a time as they load, and also will not be affected by the browser caching images when you return to the page.
<style>
img.imgfade {display:none;}
</style>
<script>
(function ($) {
$(document).ready(function() {
$('img.imgfade').load(function() {
$(this).fadeIn('slow');
})
.each(function() {
if(this.complete) {
jQuery(this).load();
}
});
})(jQuery);
</script>
});.each(function() {
try to remove the semicolon ; otherwise your code will raise a syntax error.
Remember to also add a }); for your each(function()... )
So the code becomes
...
})
.each(function() {
if(this.complete) {
jQuery(this).load();
}
});
You can make this happen with modern CSS3 transitions and a onload attribute like so:
<img src="http://www.hdwallpapersfan.com/wp-content/uploads/2013/10/mountain-4.jpg" onload="this.classList.add('show')">
img {
opacity: 0;
-webkit-transition: 1000ms opacity;
-moz-transition: 1000ms opacity;
-ms-transition: 1000ms opacity;
-0-transition: 1000ms opacity;
transition: 1000ms opacity;
}
img.show {
opacity: 1
}
Example
Granted, I used vanilla JS with this.classList which may not be suitable for you if you need older browser support
But you can always swap out for jQuery: $(this).addClass('show')
And here's an example using jQuery to perform the fade in:
<img src="http://www.hdwallpapersfan.com/wp-content/uploads/2013/10/mountain-4.jpg" onload="$(this).fadeIn(1000)">
img {
display: none;
}
Example