javascript fade text onmouseover without jquery - javascript

Hi I was wondering if anyone can help me with my problem. I want my rollover text to slowly fade from one text to the next. Visit my website to see what I'm talking about ~ http://neutralmotive.com/
If you hover over 'neutral' it quickly & instantly swaps the text to 'media'. same thing happens when you hover over 'motive', it quickly & instantly swaps to 'design'.
I want the text to slowly & smoothly fade from one text to the next when the mouse hovers over the text. I am using simple javascript without the use of ajax or jquery
please help.

If you're not eager to support every single browser out there, add an animated class to your spans and use css:
.hide{
visibility: hidden;
opacity: 0;
}
.show{
visibility: visible;
opacity: 1;
}
.animated{
-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;
}
drawback:
both .hide and .show are displayed, so they need to be absolutely positionned
You could also do this with javascript by toggling classes programmatically.
Here is some useful sources:
Callback on CSS transition

use following code for fading slowly:
var opacity = 99; // Avoid starting at 100% due to Mozilla bug
var slowly = {
fadein : function (id) {
this.fadeLoop(id, opacity);
},
fadeLoop : function (id, opacity) {
var object = document.getElementById(id);
if (opacity >= 5) {
slowly.setOpacity(object, opacity);
opacity -= 4;
window.setTimeout("slowly.fadeLoop('" + id + "', " + opacity + ")", 99);
} else {
object.style.display = "none";
}
},
setOpacity : function (object, opacity) {
object.style.filter = "alpha(style=0,opacity:" + opacity + ")"; // IE
object.style.KHTMLOpacity = opacity / 100; // Konqueror
object.style.MozOpacity = opacity / 100; // Mozilla (old)
object.style.opacity = opacity / 100; // Mozilla (new)
}
}
then just sent id of the element that contain your desire text at desired event. for more info you can check: http://www.dynamicdrive.com/forums/showthread.php?15192-JavaScript-Slowly-Fade-Using-Opacity

Related

How to write animate style in javascript for an element

Here, the animation: slideUp 0.7s ease-in-out; where 0.7s is dynamic and its needs to be calculated and added from javascript.
How to write below style/css in javascript:-
$(".narra").css("animation", "slideUp "+ i * 0.1+"s ease-in-out");
.css
.narra{
/* animation: slideUp 0.7s ease-in-out; */
}
#keyframes slideUp{
from {
transform: translateY(100%);
opacity: 0;
}
to {
transform: translateY(0%);
opacity: 1;
}
}
Try using .style aproach, like this:
$(".narra").style.animation = "slideUp "+ i * 0.1+"s ease-in-out";
Let me know if that helped :)
You won't be able to easily modify the CSS once it has been sent by the server. However you can use jQuery or Javascript to modify the animation-duration property of the object(s) that you want.
There are additional animation components that you can break your CSS up into to allow for easier or more readable base classes, then use the Javascript to set the duration
.narra {
animation-name: 'slideUp',
animation-timing-function: ease-in-out
}
var calc = i * 0.1 // your math here;
$(".narra").css("animation-duration", calc + "s");
Demo Fiddle

Javascript - changing background color opacity with time interval

I am trying to add the background color to a .top-barz element when I click on another element, but I would like to make that as an animation in duration of 1s. I am pretty new to javascript and not sure how to do that?
I would like to animate from change opacity of rgba(36,36,36, .1) to rgba(36,36,36, 1)
I have come up with this code and put it into my on click function, but this is obviously not working:
var topBar = setInterval(function(){ topBarBackground() }, 1000);
function topBarBackground() {
for (var i = 1; i <= 9; i++) {
$('.top-barz').css('background-color', 'rgba(36,36,36,.' + i + ')');
}
}
clearInterval(topBar);
You may consider the fadeIn function of jQuery.
$('.top-barz').fadeIn(10000);
Here is some sample code to get you started
JQuery
$('.button').on('click', function() {
$('.top-barz').addClass('new-color');
});
CSS
.top-barz {
background-color:#000;
-webkit-transition: background-color 1s linear;
-moz-transition: background-color 1s linear;
-o-transition: background-color 1s linear;
-ms-transition: background-color 1s linear;
transition: background-color 1s linear;
}
.top-barz.new-color {
background-color:#eee;
}
Obviously you would change the colors to whatever color you want for your design.
EDIT
Here is the Fiddle
Seems to be working fine in chrome on my end
Michael McCoy is totally right in his comment. I would do the same as you will also benefit from GPU acceleration if you use CSS and it will make your code lighter.
This apart, your code has 2 errors:
missing i++
missing var i
_
function topBarBackground() {
for (var i = 1; i < 9; i++) {
$('.top-barz').css("background-color", "rgba(36,36,36,." + i + ")");
}
}
var myVar = setInterval(function(){topBarBackground()}, 1000);
Anyway, drop this idea.
So to add class just do $('.top-barz').addClass('changedColor');
and in css:
.top-barz {
background-color: rgba(36,36,36,.1);
-webkit-transition: 1s;
-o-transition: 1s;
transition: 1s;
}
.top-barz.changedColor {
background-color: rgba(36,36,36,1);
}

on event target add css tilde from element1 to element2

basically, how to dynamically perform the following using JS:
element1:target ~ element2 {//does something}
element1.addEventListener(":target", () => {
//something here?
});
Or maybe another instance to make it clearer:
.go:checked ~ .road {
-webkit-animation: move-road 6s 1 1.3s ease-in-out forwards,
rotate-road 1s forwards;
}
(Source) : http://blog.teamtreehouse.com/triggering-css-animations-with-sibling-selectors
Is this JS doable?
The context of this code relates to a carousel without any plugins. The question wasn't about slider but I am just going to explain how I Instead tried to make it simpler with the following as against my requirements above:
e.addEventListener('click', function(evt) {
// e is individual buttons on the slider div
let that = this;
// id = evt.target.hash;
id = that.href;
// console.log(id);
num = parseInt(id[id.length - 1]) * -800;
slider.style.left = `${num}px`;
});
slider is the following class on the css side, where it matters:
.div-img-holder
width: 2400px;
height: 400px;
clear: both;
position: relative;
-webkit-transition: left 1s;
-moz-transition: left 1s;
-o-transition: left 1s;
transition: left 1s;
I calculated the total div frames to show in one frame of the slider and set the presentable width;
Created a slider width as in here i.e. maximum width.
On each btn click , the slider goes left by a certain position. the transition takes care of the smooth left movement.
Put the transition and pseudo-css stuff to css.

Rotate background using jquery [duplicate]

I have taken a look through stackoverflow for hours now, and I have found a topic similar to what I am trying to achieve
JavaScript, How to change the background of a div tag every x seconds
When I modify this solution in my script, I get no background image at all so I thought I would come back to the source to get some fresh eyes and thoughts.
Here is my setup:
HTML
<div id="Background"></div>
CSS:
.background-1 {
background: url('Images/mybg1.jpg');
-webkit-transition: background 500ms linear;
-moz-transition: background 500ms linear;
-o-transition: background 500ms linear;
-ms-transition: background 500ms linear;
transition: background 500ms linear;
}
.background-2 {
background: url('Images/mybg2.jpg');
-webkit-transition: background 500ms linear;
-moz-transition: background 500ms linear;
-o-transition: background 500ms linear;
-ms-transition: background 500ms linear;
transition: background 500ms linear;
}
Javascript in the head tag
<script>
$(document).ready(function(){
setInterval(function() {
if($('#background').hasClass('background-1')) {
$('#background').addClass('background-2');
setTimeout(function() {
$('#backdrop').removeClass('background-1');
}, 1000);
}
else if($('#background').hasClass('background-2')) {
$('#background').addClass('background-1');
setTimeout(function() {
$('#backdrop').removeClass('background-2');
}, 1000);
}
}, 2000);
});
I want to somehow be able to use several images for the background and have them change out every 5 or so seconds. How do I do this?
Here is what I have tried
HTML
<div id="Background">
<img src="<%=skinpath%>/images/mybg2.jpg" class="bgM"/>
<img src="<%=skinpath%>/images/mybg1.jpg" class="bgM"/>
</div>
CSS:
#Background, img.bgM {
background:#fff no-repeat 0 bottom;position:absolute;bottom:0;min-width:960px;min-height:100%;z-index:-99999;
background-position: top center;
}
Javascript:
<dnn:DnnJsInclude runat="server" FilePath="js/jquery.cycle.all.js" PathNameAlias="SkinPath" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.3.min.js"></script>
$(document).ready(function() {
$('#Background').cycle({
fx: 'fade',
pager: '#smallnav',
pause: 1,
speed: 1800,
timeout: 3500
});
});
This last solution worked however I could not get the image to position top center(even when specified in the css.) Any help on this is greatly appreciated!
You could try using different classes for each image, and then just swap out CSS classes in a given interval.
$(document).ready(function(){
var seconds = 5000;
var step = 0;
var limit = 5;
$("#Background").addClass("image-"+step);
setInterval(function(){
$("#Background").removeClass("image-"+step);
step = (step > limit) ? 0 : step + 1;
$("#Background").addClass("image-"+step);
},seconds);
});
I'm not sure what kind of animation you are trying to do, but you could fadeOut and then fadeIn.
$(document).ready(function(){
var seconds = 5000;
var step = 0;
var limit = 5;
$("#Background").addClass("image-"+step).fadeIn(500);
setInterval(function(){
$("#Background").fadeOut(500,function(){
$(this).removeClass("image-"+step);
step = (step > limit) ? 0 : step + 1;
$("#Background").addClass("image-"+step).fadeIn(500);
});
},seconds);
});
You can try swapping backgrounds like so:
Create CSS Class for each background and include transitions as part of the ruleset:
.background-1 {
background: url('background-1.jpg');
-webkit-transition: background 500ms linear;
-moz-transition: background 500ms linear;
-o-transition: background 500ms linear;
-ms-transition: background 500ms linear;
transition: background 500ms linear;
}
Add a script that will swap out the classes on a regular interval. (You would most likely wrap this script within $(document).ready) Since your transitioning backgrounds, you may not want the previous background immediately removed, so you can use a delay call to remove it after the transition would complete.
The following example would start the background switch every two seconds, and remove the previous background after 1 second. Since in my CSS, I declared that the transition should take .5 seconds, the new background is already there before the old one is removed:
setInterval(function() {
if($('#background').hasClass('background-1')) {
$('#background').addClass('background-2');
setTimeout(function() {
$('#background').removeClass('background-1');
}, 1000);
}
else if($('#background').hasClass('background-2')) {
$('#background').addClass('background-1');
setTimeout(function() {
$('#background').removeClass('background-2');
}, 1000);
}
}, 2000);
Note: The code that I've provided would require you to chain multiple if/else if statements together, there is probably a more efficient way to go about this.
I've done something similar (background colors instead of images) as a teaser for an upcoming project of mine, you can check it out here.
Update: Forgot to mention, make sure to declare one of the background classes in your Div element:
<div id="background" class="background-1"></div>
It sounds like you're trying to do a slide show. I highly recommend the JQuery Cycle Plugin or Cycle2. The Cycle2 Getting Started page has a nice incremental demo/tutorial.

Triggering CSS transitions on page load with delays

So I've successfully tested a css fade-in transition effect of two images using the following Javascript as a trigger so it starts when the page loads (and NOT on hover or click). Now how can I add a 10 second delay to the start of the transition? I was hoping a simple "transition-delay: 10s;" would do the trick but it seems to be getting ignored. I don't want to use key frame animations because it's not compatible with older browsers.
Here's the script:
<script type="text/javascript">
window.onload = function(){
document.body.setAttribute("class", document.body.getAttribute('class') + " loaded");
}
</script>
Here's my CSS:
#MountainsBkg1 img {
width: 2348px;
opacity: 1;
position: absolute;
left: 0;
-webkit-transition: opacity 3s;
-moz-transition: opacity 3s;
-o-transition: opacity 3s;
transition: opacity 3s;
transition-delay: 10s;
}
#builder-layout-52bf21c0ea5ff.loaded #MountainsBkg1 img {
opacity:0;
}
The correct function would be:
window.onload = setTimeout(function(){document.body.setAttribute("class", document.body.getAttribute('class') + " loaded");}),10000)
If you're looking for a javascript only answer for this (that works on everything).
I'm also assuming that this is only going to be applied on the initial load of the page.

Categories

Resources