no transition effect on mouse over and mouse out with css - javascript

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;

Related

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.

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>

Menu shifting upon window re-sizing

This menu should be positioned in the center of the website and cope with the resizing of the browser's window. Now it's in the center and the animation works. But whenever i try to make the menu responsive so it'll remain in the middle of the website when i resize, the animation stops. Any help please..
Scripting
$(".menu").on("click", function () {
$(".menu").addClass('permahover');
});
CSS
li {
list-style-type: none;
font-size: 1.5em;
height: 40px;
width: 180px;
text-align: right;
border-style: none;
}
.menu {
width: 150px;
height: 350px;
}
.menu li {
position: relative;
top: 150px;
bottom: 0;
left: 690px;
right: 0;
margin: auto;
border-style: none;
}
#item7 {
transition: opacity .8s, left .8s ease-out;
-moz-transition: opacity .8s, left .8s ease-out;
-webkit-transition: opacity .8s, left .8s ease-out;
-o-transition: opacity .8s, left .8s ease-out;
}
#item6 {
transition: opacity 1s, left 1s ease-out;
-moz-transition: opacity 1s, left 1s ease-out;
-webkit-transition: opacity 1s, left 1s ease-out;
-o-transition: opacity 1s, left 1s ease-out;
}
#item5 {
transition: opacity 1.2s, left 1.2s ease-out;
-moz-transition: opacity 1.2s, left 1.2s ease-out;
-webkit-transition: opacity 1.2s, left 1.2s ease-out;
-o-transition: opacity 1.2s, left 1.2s ease-out;
}
#item4 {
transition: opacity 1.4s, left 1.4s ease-out;
-moz-transition: opacity 1.4s, left 1.4s ease-out;
-webkit-transition: opacity 1.4s, left 1.4s ease-out;
-o-transition: opacity 1.4s, left 1.4s ease-out;
}
#item3 {
transition: opacity 1.6s, left 1.6s ease-out;
-moz-transition: opacity 1.6s, left 1.6s ease-out;
-webkit-transition: opacity 1.6s, left 1.6s ease-out;
-o-transition: opacity 1.6s, left 1.6s ease-out;
}
#item2 {
transition: opacity 1.8s, left 1.8s ease-out;
-moz-transition: opacity 1.8s, left 1.8s ease-out;
-webkit-transition: opacity 1.8s, left 1.8s ease-out;
-o-transition: opacity 1.8s, left 1.8s ease-out;
}
#item1 {
transition: opacity 2s, left 2s ease-out;
-moz-transition: opacity 2s, left 2s ease-out;
-webkit-transition: opacity 2s, left 2s ease-out;
-o-transition: opacity 2s, left 2s ease-out;
}
.permahover li {
opacity: 1;
left: 10%;
}
HTML
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="menu" class="menu">
<ul class="headlines">
<li id="item1" onclick="checklist(this)">
<button onclick="myFunction()">a</button></li>
<li id="item2">
<button onclick="myFunction2()">b</button></li>
<li id="item3">
<button>c</button>
</li>
<li id="item4">
<button>d</button>
</li>
<li id="item5">
<button>e</button>
</li>
<li id="item6">
<button>f</button>
</li>
<li id="item7">
<button>g</button>
</li>
</ul>
</div>
$(".menu").on("click", function () {
$(".menu").addClass('permahover');
});
li {
list-style-type: none;
font-size: 1.5em;
height: 40px;
width: 180px;
text-align: right;
border-style: none;
}
.menu {
width: 150px;
height: 350px;
}
.menu li {
position: relative;
top: 150px;
bottom: 0;
left: 690px;
right: 0;
margin: auto;
border-style: none;
}
#item7 {
transition: opacity .8s, left .8s ease-out;
-moz-transition: opacity .8s, left .8s ease-out;
-webkit-transition: opacity .8s, left .8s ease-out;
-o-transition: opacity .8s, left .8s ease-out;
}
#item6 {
transition: opacity 1s, left 1s ease-out;
-moz-transition: opacity 1s, left 1s ease-out;
-webkit-transition: opacity 1s, left 1s ease-out;
-o-transition: opacity 1s, left 1s ease-out;
}
#item5 {
transition: opacity 1.2s, left 1.2s ease-out;
-moz-transition: opacity 1.2s, left 1.2s ease-out;
-webkit-transition: opacity 1.2s, left 1.2s ease-out;
-o-transition: opacity 1.2s, left 1.2s ease-out;
}
#item4 {
transition: opacity 1.4s, left 1.4s ease-out;
-moz-transition: opacity 1.4s, left 1.4s ease-out;
-webkit-transition: opacity 1.4s, left 1.4s ease-out;
-o-transition: opacity 1.4s, left 1.4s ease-out;
}
#item3 {
transition: opacity 1.6s, left 1.6s ease-out;
-moz-transition: opacity 1.6s, left 1.6s ease-out;
-webkit-transition: opacity 1.6s, left 1.6s ease-out;
-o-transition: opacity 1.6s, left 1.6s ease-out;
}
#item2 {
transition: opacity 1.8s, left 1.8s ease-out;
-moz-transition: opacity 1.8s, left 1.8s ease-out;
-webkit-transition: opacity 1.8s, left 1.8s ease-out;
-o-transition: opacity 1.8s, left 1.8s ease-out;
}
#item1 {
transition: opacity 2s, left 2s ease-out;
-moz-transition: opacity 2s, left 2s ease-out;
-webkit-transition: opacity 2s, left 2s ease-out;
-o-transition: opacity 2s, left 2s ease-out;
}
.permahover li {
opacity: 1;
left: 10%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="menu" class="menu">
<ul class="headlines">
<li id="item1" onclick="checklist(this)">
<button onclick="myFunction()">a</button></li>
<li id="item2">
<button onclick="myFunction2()">b</button></li>
<li id="item3">
<button>c</button>
</li>
<li id="item4">
<button>d</button>
</li>
<li id="item5">
<button>e</button>
</li>
<li id="item6">
<button>f</button>
</li>
<li id="item7">
<button>g</button>
</li>
</ul>
</div>

All you need is to remove your class on window resize. Try the following:
$(window).resize(function(){
$(".menu").removeClass("permahover")
});
I would also like to mention that your menu is actually off screen to the right, and the user can actually scroll to that position. Wrap this entire thing into a box and hide its overflow to make sure this isn not an issue.

Why jquery ui draggable is slow in this example

In the jquery ui site, the draggable examples are fast. But with this markup, the plugin is terribly slow:
$("ul.projects").sortable({
items: ".ui-state-default",
containment:"parent",
cursor:"move",
cursorAt:{left: 90}
});
Codepen

Remove all transitions for ul.projects li. It makes the animation slow.
Or turn off them for .ui-sortable-helper:
ul.projects li:not(.ui-sortable-helper) {
float: left;
margin: 0px 6.5px 12px;
cursor: pointer;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
transition: all 0.2s linear;
}

Categories

Resources