Develop Reference

Change fixed header logo while scroll down

I need to change logo in fixed header while passing different sections.
If you take a look at this site, it changes color while scroll down. I need to have this function in my website. This is the site that I am working on right now.
Built with WordPress divi theme.
Tried new things but none of it is working. Can anyone recommend how to code this function?
I tried to use custom css inside divi module but it is not working.
I have this css code it was used for regular heading to sticking heading.
#logo {
opacity:1;
display:inherit;
margin: 0 0 0 0;
-webkit-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
}
#logo.second-logo {
opacity:0;
margin: 0 0 -200px -130px;
-webkit-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
}
.et-fixed-header #logo {
opacity: 0;
margin: -200px 0px 0 0px;
-webkit-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
}
.et-fixed-header #logo.second-logo {
opacity:1;
margin: 0 0 0 -90px !important;
-webkit-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
}
So, when user scroll down and passing different section this
.et-fixed-header #logo
.et-fixed-header #logo.second-logo
I want opacity change dynamically while scroll down and pass different section.

Hover button with delay

In my agency's website, the buttons on the homepage have a small delay between hovering and I don't know what's causing this behaviour. Could you guys take a look?
Aparticula
This is the code applied to it
.btn span {
position: absolute;
top: 2px;
left: 2px;
width: 196px;
height: 34px;
background: #fff;
-webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
}
Please help!

That because you have applied transition to all
Remove this from your css
-webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;

Transition properties allow elements to change values over a specified duration, animating the property changes, rather than having them occur immediately.
For better understanding, check this out :
.box {
width: 150px;
height: 150px;
background: #914969;
margin-top: 20px;
margin-left: auto;
margin-right: auto;
-webkit-transition: background-color 2s ease-out;
-moz-transition: background-color 2s ease-out;
-o-transition: background-color 2s ease-out;
transition: background-color 2s ease-out;
}
.box:hover {
background-color: #ff9999;
cursor: pointer;
<div class="box">Transition effects</div>
For the most part, the order of the values does not matter -- unless a delay is specified. If you specify a delay, you must first specify a duration. The first value that the browser recognizes as a valid time value will always represent the duration. Any subsequent valid time value will be parsed as the delay.
Some properties cannot be transitioned because they are not animatable properties. See the spec for a full list of which properties are animatable.
Hope this helps..!

Animate / apply Transition addClass and removeClass in jQuery?

I am new to jQuery & javascript and making a simple slider by adding and removing class 'active' on next slide which is working fine but seems ugly because there is no animation. Is there any way to animate the process of adding and removing a class? Like:
$('#next').on('click', function(){
$('div.active').removeClass('active', duration: 500ms).next().addClass('active', duration: 500ms);})
At Jquery documentation website I have seen that there is an animate function which is used to animate things. Is it possible to use that function in my case?
Update: I have also tried to apply the CSS transition on div and div.active which is not working.
Css:
.slider div {
display: none;
opacity: 0;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-ms-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
}
div.active {
display: inline-block;
opacity: 1;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-ms-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
}

From comments of different users I came to know that css transition can not be applied on display: none elements. So instead of display none I applied height 0px; opacity: 0; which worked fine for me.
.slider img{
height: 0px;
opacity: 0;
display: block;
-webkit-transition: opacity 2s ease;
-moz-transition: opacity 2s ease;
-ms-transition: opacity 2s ease;
-o-transition: opacity 2s ease;
transition: opacity 2s ease;
}
.slider img.active{
height: 360px;
opacity: 1;
-webkit-transition: opacity 2s ease;
-moz-transition: opacity 2s ease;
-ms-transition: opacity 2s ease;
-o-transition: opacity 2s ease;
transition: opacity 2s ease;
}
Thanks to the creator of this fiddle which gave me this idea.

.active {
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}

you cant really animate addClass or removeClass but you could add a transition
but you can use some css:
.item {
opacity: 0
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-ms-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
}
.item.active{
opacity: 1
}

Instead of animation, in your case you can use transitions
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions

how to show the effect of the focus with the border radius..i have tried . i want it to zoom out

insert an image inside the tag
and run it it may be help full to understand
clearly
.focus {
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
}
.focus:hover {
border: 70px solid #000;
border-radius: 50%;
}
<div class="focus pic"><img src=" " ></div>

First set the default values of the element on which it should be when zooming out.
Second set transition effect to 0 in :hover condition.
.focus {
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
border: 0px solid #000;
border-radius: 0;
}
.focus:hover {
-webkit-transition: all 0s ease;
-moz-transition: all 0s ease;
-o-transition: all 0s ease;
-ms-transition: all 0s ease;
border: 70px solid #000;
border-radius: 50%;
}
<div class="focus pic">
<img src="http://www.w3schools.com/html/pic_mountain.jpg">
</div>

Add a border that has no width, that way it will zoom out. Right now you remove the border if you lose focus, that does not transition.
.focus {
-webkit-transition: all 9999999s ease;
-moz-transition: all 9999999s ease;
-o-transition: all 9999999s ease;
-ms-transition: all 9999999s ease;
border: 0px solid #000;
}
.focus:hover {
border: 70px solid #000;
border-radius: 50%;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
}
<div class="focus pic"><img src="http://placehold.it/500x20" ></div>

no transition effect on mouse over and mouse out with css

I use transition effect for a div to make it change smoothly on scroll down, but I don't want this transition effect to be used when I mouse over or mouse out as the div is used as a button. I could omit this effect from mouse over, but I couldn't do anything for mouse out:
HTML Code:
<div class="navButton"></div>
CSS:
.navButton {
position: absolute;
top:10px;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.navButton.scroll {
top:100px;
}
.navButton:hover {
cursor: pointer;
-webkit-transition: none;
-moz-transition: none;
-o-transition: none;
-ms-transition: none;
transition: none;
}
and jQuery code:
$(function() {
$(window).scroll(function(event){
if($(this).scrollTop() > 400){
$('.navButton').addClass('scroll');
};
});
});

One option would be to toggle a class on mouseover/mouseout:
Updated Example
$('.navButton').on('mouseover mouseout', function () {
$(this).toggleClass('no-transition');
});
.no-transition {
-webkit-transition: none;
-moz-transition: none;
-o-transition: none;
-ms-transition: none;
transition: none;
}
You could alternatively, just transition the top property:
Updated Example
.navButton {
position: absolute;
top:10px;
-webkit-transition: top 0.5s ease-in-out;
-moz-transition: top 0.5s ease-in-out;
-o-transition: top 0.5s ease-in-out;
-ms-transition: top 0.5s ease-in-out;
transition: top 0.5s ease-in-out;
}

If you are only trying to apply the transition to the top increase, you can target top intead of all:JS Fiddle
-webkit-transition: top 0.5s ease-in-out;
-moz-transition: top 0.5s ease-in-out;
-o-transition: top 0.5s ease-in-out;
-ms-transition: top 0.5s ease-in-out;
transition: top 0.5s ease-in-out;