Fading in and out when text changes - javascript

I have a text div and several buttons that I would like the text to smoothly fade in and out when changing and/or hiding.
From checking Google and Stack Overflow, most of the answers suggest applying a CSS class of hide, then toggling that class while using a custom function to wait half a second before changing the text so the timing is perfect when the other text fades back in.
But I've read that can have problems with text that has span tags which mine have, and several people have also suggested there may be some plug-ins to simplify the process.
I can't find one, but is there a better method or a plug-in to handle this without replacing all of my code that updates text with custom functions?
I don't mind doing that if it's the only way, it just seems like there's likely a better/more intuitive option?

About your statement:
I have a text div and several buttons that I would like the text to
smoothly fade in and out when changing and/or hiding.
Fade in / And Fade out can be achieved via CSS itself, or with Javascript or if you are using a JQuery library with that also. And text within buttons will not create any issues at all.
In Pure CSS you may require only two properties:
transition and opacity to be used in proper way.
This link can be helpful from CSStricks https://css-tricks.com/almanac/properties/t/transition/
In JQuery there you have fadeIn() and fadeOut() functions which takes care of all the CSS internally and you only have to call these.
You may check this resource from W3Schools
https://www.w3schools.com/jquery/eff_fadein.asp
And Lastly even in pure Javascript the same can be achieved, depending on the requirement you have.

Related

Avoid flickering DOM elements caused by progressive enhancement by javascript?

How do I avoid flashing the un-enhanced DOM-element before my javascript has converted it into another type of element?
To be case specific: I have a select with multiple choices, which is converted via a jquery-plugin to a multi-choice-drop-down. But on page load it renders as the multiselect before the plugin runs.
Right now I'm just hiding the select until it's converted, but that leaves an empty space where the dropdown will show up.
Is there any good way avoid this kind of flickering?
Without Javascript:
So this is the situation, the things I've seen about progressive enhancement so far is just to add some CSS to the flickering dom elements, but since this is rather a transformation I'd like to render something in the place where it's supposed to be.
With Javascript:
I hope it's clear what I'm trying to achieve here, any good solutions? Should I render a normal drop-down on the place as a placeholder and then replace it when the DOM is ready? How do I handle the no-js case in that case? The site needs to be available to everyone.
If you adjust your layout to make the multi-select sit below the label like everything else and then clone the select, rebuild it in memory and then swap it in as #elad.chen suggests (possibly via an embedded script after the element or the whole form), you should reduce the jarring flicker. You could also use transitions to smoothly swap the two: shrink the height of the multi-select then swap or fade out and fade in using opacity.

How to make angled text in webpage by using HTML/CSS

I am trying to make the CSS animation for the Menu. Here I want to make the menu as shown in the image. My question is how to write the menu text like in this sample image and make onclick event for each text? The Onclick event might use the CSS #Keyframes (For making some animations).
I am newbie to the web designing field, and it looks very complex for me.
Use CSS transforms
-webkit-transform:rotate(degrees);
transform:rotate(degrees);
Use it on the whole outer wrapper, so you wont have to do it individually on all the links.

CSS infinite animation

This project I am working on required me to build a moving animation that uses nothing other than css and styled divs.
A perfect working example of something almost identical can be found here (note the blue background white moving squares):
http://www.braintreepayments.com
However, unlike the demo above, my design consists of about 10 times more div shapes in the animation and when the animation timing expires, the container becomes blank, which makes it looks like it was poorly designed.
My question is, how does the animation in the above example create the 'continuous / infinite effect' on their website, with so little styled divs? I have been trying to formulate something to replicate this effect no success.
Note: I open to using a JQuery / Javascript solution as well.
By using the anitmation-iteration-count property and using the infinite value - you will have a hard time finding the matching selector as their CSS is minified, but that rule exists somewhere in their stylesheet.

add font overlay to simple javascript typewriter

new to coding in general, so I'm kind of at a loss. I have a simple typewriter effect jquery script AND another simple javascript/ CSS trick to overlay one font on top of another. I am trying to combine the functionality of the two. I have found two ways to overlay the fonts with javascript/css, but the issue I have is this.
When the page loads, the typing script starts and at the same time the script for the font overlay runs, and since the typing script is just getting started, the font overlay does not apply to the typed text. The ticker code i am using is at https://github.com/stephband/jticker and the javascript/css is from here http://jsfiddle.net/4xgdv/1/ with th js part looking like this
$('.doublefont').each(function() {
$(this).attr('content', $(this).html());
and using the css class "doublefont" and the :after selector to copy and overlay the text.
Not looking for someone to code it for me, just a place to start in where things should go during the recursion and an idea how the overlay would fit in would be nice.
This is really beyond me, but I thought of something I wanted to see and it wont leave me alone, so any help would be appreciated!
I wrote the script for overlay text in this site and it's full open source.
try it:http://www.drabc.ir/

Can i do the effect shown in this page using jquery?

Please look at this page:
http://www.nike.com/nikeos/p/nikegolf/en_US/
In the slide number 2, there is a midpanel that does a growing effect onmouse over.Some panels step aside at the same time or simply grows over another. As you can see, the background changes, the box grows as well as its content. I think that is flash, but, is there a way to obtian the same results using jquery? I have certain jquery experience but i dont wich function would be usefull to combine to get those results
Thanks
I would say it is flash but if you want to do some thing like it try
http://api.jquery.com/animate/
I did a flash like effect for a customer using .animate() it can look very good using images for each part.
you should use the animate() function.
firstly, i would make sure the elements like those menu elements are all set to be variable width/height. then, make an onmouseover event handler which is tied to your animate function which will increase or decrease the size of the element that is being moused over. since all the elements are variable width/height, they will adjust based on the amount of space available to them. you probably will want to have a short animation time.
research animate and if you have any more questions post here.
Not easily, because the image itself is being animated. This is not just html object manipulation.

Categories

Resources