Highlighted

I'm having trouble with fading-out transitions

Explorer ,
Apr 22, 2019

Copy link to clipboard

Copied

While continuing to work on my other problem, I've run into a different issue...

I'm trying to create a fade-in fade-out affect that is identical to the navigation menu in this link...

25 - Pikachu

On my website I have tried both this code...

li a:hover, .dropdown:hover .dropbtn {

color: #282828;

  background-color: #ffffff;

transition: color 0.7s ease-in-out;

}

and this following code...

li a:hover, .dropdown:hover .dropbtn {

color: #282828;

  background-color: #ffffff;

-webkit-transition: all 300ms ease;

  -moz-transition: all 300ms ease;

  -ms-transition: all 300ms ease;

  -o-transition: all 300ms ease;

  transition: all 300ms ease;

}

The second one is the exact code from the website example.

For some reason it will fade in (not as smoothly and a little bit too quick) and it won't fade out at all. I unsure as to why this is, though.

Here is my website...

Pokémon - English dubbed episode 0001

Adobe Community Professional
Correct answer by Nancy OShea | Adobe Community Professional

LIZZIE  wrote

on the Weebly site, it works just fine on both browsers. I don't understand that, unless I'm missing a line of code or something.

DIY site builders like Wix, Weebly and Squarespace are generating code for browser consumption, not human consumption.   They use a boat load of scripts behind the scenes to fix problems in x browsers.  Even expert coders can't always tell what's going on.   So trying to learn anything useful from these sites is a waste of time in my view.

TOPICS
Learn Dreamweaver

Views

780

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

I'm having trouble with fading-out transitions

Explorer ,
Apr 22, 2019

Copy link to clipboard

Copied

While continuing to work on my other problem, I've run into a different issue...

I'm trying to create a fade-in fade-out affect that is identical to the navigation menu in this link...

25 - Pikachu

On my website I have tried both this code...

li a:hover, .dropdown:hover .dropbtn {

color: #282828;

  background-color: #ffffff;

transition: color 0.7s ease-in-out;

}

and this following code...

li a:hover, .dropdown:hover .dropbtn {

color: #282828;

  background-color: #ffffff;

-webkit-transition: all 300ms ease;

  -moz-transition: all 300ms ease;

  -ms-transition: all 300ms ease;

  -o-transition: all 300ms ease;

  transition: all 300ms ease;

}

The second one is the exact code from the website example.

For some reason it will fade in (not as smoothly and a little bit too quick) and it won't fade out at all. I unsure as to why this is, though.

Here is my website...

Pokémon - English dubbed episode 0001

Adobe Community Professional
Correct answer by Nancy OShea | Adobe Community Professional

LIZZIE  wrote

on the Weebly site, it works just fine on both browsers. I don't understand that, unless I'm missing a line of code or something.

DIY site builders like Wix, Weebly and Squarespace are generating code for browser consumption, not human consumption.   They use a boat load of scripts behind the scenes to fix problems in x browsers.  Even expert coders can't always tell what's going on.   So trying to learn anything useful from these sites is a waste of time in my view.

TOPICS
Learn Dreamweaver

Views

781

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Apr 22, 2019 0
Adobe Community Professional ,
Apr 22, 2019

Copy link to clipboard

Copied

CSS transition should be on the anchor selector.

Also HOVER has no effect on touch screen devices.  If you use drop menus, you must make them open on click.

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 22, 2019 1
Explorer ,
Apr 22, 2019

Copy link to clipboard

Copied

hm, I'm pretty sure that's where I have it at. Werd thing is that it seems to work fine on chrome, but not internet explorer.

However, on the Weebly site, it works just fine on both browsers. I don't understand that, unless I'm missing a line of code or something.

EDIT:

More so weird, the transition works fine on the drop down, even on IE, but not on the top link? that they drop down from?

Besides that, mine seems almost quicker or something? Not as fluid of a transition.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 22, 2019 0
Adobe Community Professional ,
Apr 22, 2019

Copy link to clipboard

Copied

LIZZIE  wrote

on the Weebly site, it works just fine on both browsers. I don't understand that, unless I'm missing a line of code or something.

DIY site builders like Wix, Weebly and Squarespace are generating code for browser consumption, not human consumption.   They use a boat load of scripts behind the scenes to fix problems in x browsers.  Even expert coders can't always tell what's going on.   So trying to learn anything useful from these sites is a waste of time in my view.

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 22, 2019 1
Explorer ,
Apr 22, 2019

Copy link to clipboard

Copied

I actually completely agree with that statement. I don't like using website builders for that reason.

I don't need to do it their way, though. I just need to figure out some way to replicate that in a more correct way.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 22, 2019 0
mjbelt LATEST
Adobe Community Professional ,
Apr 23, 2019

Copy link to clipboard

Copied

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 23, 2019 0