Animate / apply Transition addClass and removeClass in jQuery? - javascript

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

Related

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.

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;

HTML5/CSS3 Image Rotatation initiated by another Image Hover

When you mouse over either image, each rotates 360 degrees and changes from 50% to 100% opacity revealing image text below. I am trying to rotate the opposite image from which I hover over to simulate turning gears.
See Fiddle here.
#navBlueGear {
float:left;
transition: opacity 1s;
opacity:0.5;}
#navBlueGear:hover {
opacity:1.0;}
#aboutMe {
position:relative;
float:left;
top:130px;
left:-80px;
opacity: 0;
-webkit-transition: 1.5s;
-moz-transition: 1.5s;
-o-transition: 1.5s;
transition: 1.5s;}
#navBlueGear:hover ~ #aboutMe {
opacity: 1;}
.aboutLink {
-webkit-transition:all 1.5s ease-out;
-moz-transition:all 1.5s ease-out;
-ms-transition:all 1.5s ease-out;
-o-transition:all 1.5s ease-out;
transition:all 1.5s ease-out;}
.aboutLink:hover {
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-ms-transform:rotate(360deg);
-o-transform:rotate(360deg);
transform:rotate(360deg);}
#navOrangeGear {
position:relative;
float:left;
top:85px;
left:-75px;
transition: opacity 1s;
opacity:0.5;}
#navOrangeGear:hover {
opacity:1.0;}
#work {
position:relative;
float:left;
top:176px;
left:-143px;
opacity: 0;
-webkit-transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
transition: 1s;}
#navOrangeGear:hover ~ #work {
opacity: 1;}
.workLink {
-webkit-transition:all 1.5s ease-out;
-moz-transition:all 1.5s ease-out;
-ms-transition:all 1.5s ease-out;
-o-transition:all 1.5s ease-out;
transition:all 1.5s ease-out;}
.workLink:hover {
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-ms-transform:rotate(360deg);
-o-transform:rotate(360deg);
transform:rotate(360deg);}
Is it possible to turn the opposite gear counter to the image you initially hover over as well as control the speed as the teeth of each need to look realistic?
Is it possible in CSS3 and if not how would I accomplish this in JavaScript? Any other suggestions or advice is appreciated, I am just beginning to work with writing code, thank you in advance.

Try this solution
http://jsfiddle.net/BRGG2/30/
I put all elements in a containing div and set the rotation to work when that div is hovered.
Each gear keeps its own opacity and hover link.
I set the second gear to turn the opposite way using this
#container:hover .workLink {
-webkit-transform:rotate(-360deg);
-moz-transform:rotate(-360deg);
-ms-transform:rotate(-360deg);
-o-transform:rotate(-360deg);
transform:rotate(-360deg);
}
As to calibrate both gears speed, this will take some fine tuning, using -webkit-transition-duration.

css transform have no transition on hover and remain static on mouseout

I have coded a compass and a compass needle for a header, when you hover over the compass the needle spins at a 720 degree angle, however, i want a way so that when i move my mouse off the compass it doesn't reverse. SOrry if i'm overlooking an easy solution but here's my current code to explain what im doing better.
.arrow{
width:100px;
height:100px;
background-image:url(https://dl.dropbox.com/u/81513943/Monolith/images/compass.png);
background-size:100px;
}
.arrowhover{
position:absolute;
margin-top:-100px;
background-size:100px;
width:100px;
-webkit-transition: all 1.7s ease-in-out;
-moz-transition: all 1.7s ease-in-out;
-ms-transition: all 1.7s ease-in-out;
-o-transition: all 1.7s ease-in-out;
transition: all 1.7s ease-in-out;
height:100px;
}
.arrowhover:hover{
-webkit-transform: rotate(1440deg);
-moz-transform: rotate(1440deg);
-webkit-transition: all 1.7s ease-out;
-moz-transition: all 1.7s ease-in-out;
-ms-transition: all 1.7s ease-in-out;
-o-transition: all 1.7s ease-in-out;
transition: all 1.7s ease-in-out;
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
so yeh, compass is normal, hover it spins 720 degrees and on mouse out i want no animation, is there a way to do this?
p.s im useless at jquery and javascript

check my updated fiddle: http://jsfiddle.net/rHpDn/3/
I added transition: all 0s ease-in-out; to .arrow, so it does't have a transition back anymore.

Categories

Resources