I have this jquery code.
//this is the main javascript
$(document).ready(function(){
$('nav.menu a').hover(
function () {
$('nav.menu').find(".current_item").removeClass("current_item");
$(this).addClass("current_item");
},
function () {
$(this).removeClass("current_item");
$('nav.menu').find(".damenu").addClass("current_item")
}
);
});
and this html structure
<nav class="menu">
Home
Gallery
Portfolio
About
Contact
</nav>
and this css
.menu
{
background: 1px solid #00ffff;
width: 100%;
padding: 0px 0px 0px 10px;
}
.menu a
{
padding: 8px;
color: #0099ff;
font: bold 20px Archivo Narrow, Arial Rounded MT, Tahoma, Calibri, Asap, Arial, Verdana, sans-serif;
text-decoration: none;
float: left;
margin-right: 8px;
text-shadow: 2px 1px 1px #ffffff;
border-top: 3px solid transparent;
border-bottom: 3px solid transparent;
}
.current_item /*, .menu a:hover*/
{
color: #C5F700 !important;
border-top: 3px solid #C5F700 !important;
border-bottom: 3px solid #C5F700 !important;
}
as you can see, the routine is this, there is a class for the current menu and whenever a user hover into one of the menu, the class of the current menu is removed and a class "current_item" added to the current hover menu and in mouseout event, the class "current_item" is removed from the current hovered element and the class "current_item" is added back to the current menu which has also a class of "damenu" and as you can see the work of the class "current_item" is to add top and bottom borders and it works good, but I want to add some animation into the borders or in the class "current_item" when mouseover or in mouseout.
So precisely, I want to animate the borders or the class "current_item" whenever in mouseover or mouseout event and also, is there anyway I can make the nav into center?
I am open in, Ideas, recommendation and suggestion. Hope someone here could help, thank you.
Can you not just add the following to .current_item?
-webkit-transition: .5s border-color, color ease;
-moz-transition: .5s border-color, color ease;
-ms-transition: .5s border-color, color ease;
-o-transition: .5s border-color, color ease;
transition: .5s border-color, color, ease;
You may animate border by only css
.menu
{
background: 1px solid #00ffff;
width: 100%;
padding: 0px 0px 0px 10px;
}
.menu a
{
padding: 8px;
color: #0099ff;
font: bold 20px Archivo Narrow, Arial Rounded MT, Tahoma, Calibri, Asap, Arial, Verdana, sans-serif;
text-decoration: none;
float: left;
margin-right: 8px;
text-shadow: 2px 1px 1px #ffffff;
border-top: 3px solid transparent;
border-bottom: 3px solid transparent;
-webkit-transition: 1s all ease;
-moz-transition: 1s all ease;
-ms-transition: 1s all ease;
-o-transition: 1s all ease;
transition: 1s all ease;
}
.menu a.current_item, .menu a:hover
{
color: #C5F700 !important;
border-top: 3px solid #C5F700 ;
border-bottom: 3px solid #C5F700 ;
}
Get JQuery color animation plugin, then:
$('#currentitem').hover(function(){
(this).animate({borderColor:'#fff'});
}, function(){
(this).animate({borderColor:'#000'});
});
Related
<a href="https://fufala.ge/ka/product/detail/3762/8496" class="btn btn--round btn--dark">
<span class="icon icon-eye"></span>
</a>
this is a link with eye icon and it needs double touch on phone to get into it.
I have tried everything like I used javascript and create a function where onclick the link will be redirected but it needs double touch again
this is css of this button
.btn--round {
border-radius: 999em;
width: 60px;
height: 60px;
padding: 0;
line-height: 65px;
font-size: 25px;
position: relative;
cursor: pointer;
box-shadow: 0 1px 3px rgba(0,0,0,.12), 0 1px 2px rgba(0,0,0,.24);
-webkit-transition: box-shadow .3s 0s ease;
-moz-transition: box-shadow .3s 0s ease;
-ms-transition: box-shadow .3s 0s ease;
-o-transition: box-shadow .3s 0s ease;
transition: box-shadow .3s 0s ease;
}
.btn{
display: inline-block;
margin-bottom: 0;
font-weight: 400;
text-align: center;
vertical-align: middle;
touch-action: manipulation;
cursor: pointer;
border: 1px solid transparent;
white-space: nowrap;
padding: 6px 12px;
font-size: 14px;
line-height: 1.42857143;
border-radius: 4px;
user-select: none;
}
you could also try a action on hover, sometimes one tap is hover and to taps is click on mobile:
document.getElementById("id").onmouseover= function() {
window.location.href = "link.html";
};
I am breaking my head to get the div content to slide before appearing when I hover over the relevant item that is suppose to change the content of the div dynamically using jquery. The content just changes but I would like them to slide, I have tried various things but in vain.
Please excuse me if my question is silly, I am new to Jquery.
HTML
<div class="servdescripitems">
<h3>Heading 1</h3>
<p>Paragraph of first service</p>
<ul>
<li>Heading 1 list 1</li>
<li>Heading 1 list 2</li>
</ul>
<div class="button">Service 1</div>
</div>
<ul class="serviceslist">
<li class="service1"></li>
<li class="service2"></li>
<li class="service3"></li>
</ul>
Jquery
$('.service1').mouseover(function() {
$('.servdescripitems').html('<h3>Heading 1</h3><p>Paragraph of first service</p><ul><li>Heading 1 list 1</li><li>Heading 1 list 2</li></ul><div class="button">Service 1</div>');
});
$('.service2').mouseover(function() {
$('.servdescripitems').html('<h3>Heading 2</h3><p>Paragraph of second service</p><ul><li>Heading 2 list 1</li><li>Heading 2 list 2</li></ul><div class="button">Service 2</div>');
});
$('.service3').mouseover(function() {
$('.servdescripitems').html('<h3>Heading 3</h3><p>Paragraph of second service</p><ul><li>Heading 3 list 1</li><li>Heading 3 list 2</li></ul><div class="button">Service 3</div>');
});
CSS
.servdescripitems {
width: 100%;
height: 400px;
}
.servdescripitems h3 {
text-align: center;
font-family: 'Lato', sans-serif;
font-weight: bold;
font-size: 15pt;
color: #ed1f24;
margin-bottom: 10px;
}
.servdescripitems p {
font-family: 'Lato', sans-serif;
font-weight: normal;
font-size: 12pt;
margin-bottom: 15px;
}
.servdescripitems ul{
list-style-image: url("../images/servicelist.png");
padding-left: 30px;
}
.servdescripitems li {
font-family: 'Lato', sans-serif;
font-weight: normal;
font-size: 12pt;
padding-bottom: 5px;
}
.button {
border-top: 1px solid #7e7e7e;
background: #3b363b;
background: -webkit-gradient(linear, left top, left bottom, from(#7e7e7e), to(#3b363b));
background: -webkit-linear-gradient(top, #7e7e7e, #3b363b);
background: -moz-linear-gradient(top, #7e7e7e, #3b363b);
background: -ms-linear-gradient(top, #7e7e7e, #3b363b);
background: -o-linear-gradient(top, #7e7e7e, #3b363b);
padding: 5px 10px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
-moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
box-shadow: rgba(0,0,0,1) 0 1px 0;
text-shadow: rgba(0,0,0,.4) 0 1px 0;
color: white;
font-family: 'Lato', sans-serif;
font-size: 11pt;
font-weight: bold;
text-decoration: none;
text-align: center;
width: 150px;
height: 20px;
margin: 5px auto;
}
.button:hover {
border-top-color: #ed1f22;
background: #ed1f22;
color: #ffffff;
cursor: pointer;
}
.button:active {
border-top-color: #ed1f22;
background: #ed1f22;
}
.serviceslist {
width: 80%;
margin: 0 auto;
}
.serviceslist li {
margin-bottom: 3px;
margin-right: 30px;
float: left;
}
.service1 {
background: rgba(0, 0, 0, 0) url("../images/service1.png") no-repeat scroll 0 0;
background-position: 0 0;
height: 100px;
width: 100px;
background-color: #f6f6f6;
border: 2px solid #ed1f24;
border-radius: 100px;
-webkit-transition: all 400ms linear;
-moz-transition: all 400ms linear;
-o-transition: all 400ms linear;
-ms-transition: all 400ms linear;
transition: all 400ms linear;
cursor: pointer;
}
.service2 {
height: 100px;
width: 100px;
background-color: #f6f6f6;
border: 2px solid #ed1f24;
border-radius: 100px;
-webkit-transition: all 400ms linear;
-moz-transition: all 400ms linear;
-o-transition: all 400ms linear;
-ms-transition: all 400ms linear;
transition: all 400ms linear;
cursor: pointer;
}
.service3 {
height: 100px;
width: 100px;
background-color: #f6f6f6;
border: 2px solid #ed1f24;
border-radius: 100px;
-webkit-transition: all 400ms linear;
-moz-transition: all 400ms linear;
-o-transition: all 400ms linear;
-ms-transition: all 400ms linear;
transition: all 400ms linear;
cursor: pointer;
}
I have fiddled the script here
with jQuery the simplest slides are Up and Down as they are built-in.
I've added a div inside your current service details container, so the container's size is not affected when sliding content in/out
This is how I've updated each of your mouseover functions:
$('.service1').mouseover (function() {
//check if current service shown is not the same - this avoids sliding to same content
if(inside_div.attr("current-service")!="1"){
//slideUp current content
inside_div.slideUp(function(){
//once slideUp is finished, change the content of the inside div...
inside_div.html('<h3>Heading 1</h3><p>Paragraph of first service</p><ul><li>Heading 1 list 1</li><li>Heading 1 list 2</li></ul><div class="button">Service 1</div>');
// ... then tell the div what service content it now has, and slide it back down
inside_div.attr("current-service","1").slideDown();
});
}
});
Here's an updated fiddle:
https://jsfiddle.net/g66aa0oo/
Let me know if any further explanation is needed.
Also See: https://api.jquery.com/slideUp/
If you really want left/right sliding, I'd recommend looking at a carousel effect plug-in such as slick
I am using .addClass and .removeClass on some divs which add or remove the bottom border. Is animating this possible? Something like this:
$("#left-title").addClass('active').show("slide", { direction: 'left', easing: 'easeInCirc' }, 1000);
Thanks
Sure, use the transition css3 property:
div{
float: left;
position: relative;
padding: .2em .5em .5em .5em;
background: #eceded;
font-family: Tahoma, Arial, Helvetica, sans-serif;
font-weight: bold;
box-shadow: inset 0 -5px 0 0 #bbb;
border-radius: 5px;
border: 1px solid #999;
overflow:hidden;
cursor: pointer;
}
div:after{
content: '';
display: block;
width: 0;
height: 5px;
position: absolute;
top: 100%;
left: 0;
margin-top: -5px;
background-color: red;
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-o-transition: all .5s ease;
transition: all .5s ease;
}
div:hover:after{
width: 100%;
background-color: #0c0;
}
<div>Hover me</div>
I am stuck trying to expand menu items to full width. For some reason they are indented..
Also if I expand the menu name with more characters, it messes up the formatting. I'm trying to make it expand automatically, but if I remove the 'width' property it becomes messed up.
Thanks!
Fiddle code: http://jsfiddle.net/n877s/5/
<div class="wrapper-demo">
<div id="dd" class="wrapper-dropdown-3" tabindex="1">
<span>username</span>
<ul class="dropdown">
<li>Link #1</li>
<li>Link #2</li>
<li>Link #3</li>
</ul>
</div>
CSS
.wrapper-dropdown-3 .dropdown {
/* Size & position */
position: absolute;
top: 140%;
left: 0;
right: 0;
/* Styles */
background: black;
border-radius: inherit;
border: 1px solid rgba(0,0,0,0.17);
box-shadow: 0 0 5px rgba(0,0,0,0.1);
font-weight: normal;
-webkit-transition: all 0.5s ease-in;
-moz-transition: all 0.5s ease-in;
-ms-transition: all 0.5s ease-in;
-o-transition: all 0.5s ease-in;
transition: all 0.5s ease-in;
list-style: none;
/* Hiding */
opacity: 0;
pointer-events: none;
}
.wrapper-dropdown-3 .dropdown:after {
content: "";
width: 0;
height: 0;
position: absolute;
bottom: 100%;
right: 15px;
border-width: 0 6px 6px 6px;
border-style: solid;
border-color: #fff transparent;
}
.wrapper-dropdown-3 .dropdown:before {
content: "";
width: 0;
height: 0;
position: absolute;
bottom: 100%;
right: 13px;
border-width: 0 8px 8px 8px;
border-style: solid;
border-color: rgba(0,0,0,0.1) transparent;
}
.wrapper-dropdown-3 .dropdown li a {
display: block;
padding: 10px;
text-decoration: none;
color: #8aa8bd;
border-bottom: 1px solid #e6e8ea;
box-shadow: inset 0 1px 0 rgba(255,255,255,1);
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
.wrapper-dropdown-3 .dropdown li i {
float: right;
color: inherit;
}
.wrapper-dropdown-3 .dropdown li:first-of-type a {
border-radius: 7px 7px 0 0;
}
.wrapper-dropdown-3 .dropdown li:last-of-type a {
border: none;
border-radius: 0 0 7px 7px;
}
/* Hover state */
.wrapper-dropdown-3 .dropdown li:hover a {
background: #f3f8f8;
}
/* Active state */
.wrapper-dropdown-3.active .dropdown {
opacity: 1;
pointer-events: auto;
}
/* No CSS3 support */
.no-opacity .wrapper-dropdown-3 .dropdown,
.no-pointerevents .wrapper-dropdown-3 .dropdown {
display: none;
opacity: 1; /* If opacity support but no pointer-events support */
pointer-events: auto; /* If pointer-events support but no pointer-events support */
}
.no-opacity .wrapper-dropdown-3.active .dropdown,
.no-pointerevents .wrapper-dropdown-3.active .dropdown {
display: block;
}
I hope this is what u need. Changed just a few things like left padding from dropdown class (spacing fix), changed width to auto on .wrapper-dropdown-3, and added some spacing around carret.
http://jsfiddle.net/n877s/8/
I added dummy text in button,just for testing purposes, and it works well.
Indentation is caused by ULs default left padding (or in any browsers padding), it´s 40px. So, set
.wrapper-dropdown-3 {margin-left: 0; padding-left: 0;}
If you have longer items in submenu and don't want set the width, you can force one-line items using
white-space: nowrap;
I have created a transition effect on a div. I have written the following code and its working fine, when I hover on the div, the color smoothly changes, but when I remove the mouse the color backs to its original state abruptly.
I want to know the method of changing the color slowly on Mouse out Event as well.
Kindly check my code and guide me.
<nav>
<ul>
<li id="skills" class="navText" >Work -Experience</li>
<li id="web" class="navText">Skills </li>
</ul>
</nav>
CSS
nav ul #skills
{
position:absolute;
width: 150px;
height: 150px;
border:6px solid;
border-color:white;
border-radius: 150px;
line-height:150px;
font-size: 15px;
#background-color: EA7079;
background-color: #1A1A1A;
color: white;
left:370px;
}
nav ul #skills:hover
{
position:absolute;
width: 150px;
height: 150px;
border:6px solid;
border-color: #DCDEE0;
border-radius: 150px;
line-height:150px;
font-size: 15px;
background-color: EA7079;
color: white;
left:370px;
/* CSS3 */
-webkit-transition: all 1000ms ;
-moz-transition: all 1000ms ;
-ms-transition: all 1000ms ;
-o-transition: all 1000ms ;
transition: all 1000ms ;
}
It is changing back suddenly because you have the transitions in the :hover rule. The transitions only works when the mouse is over the element.
Do it like this instead:
nav ul #skills
{
position:absolute;
width: 150px;
height: 150px;
border:6px solid;
border-color:white;
border-radius: 150px;
line-height:150px;
font-size: 15px;
#background-color: EA7079;
background-color: #1A1A1A;
color: white;
left:370px;
/* CSS3 */
-webkit-transition: all 1000ms ;
-moz-transition: all 1000ms ;
-ms-transition: all 1000ms ;
-o-transition: all 1000ms ;
transition: all 1000ms ;
}
nav ul #skills:hover
{
position:absolute;
width: 150px;
height: 150px;
border:6px solid;
border-color: #DCDEE0;
border-radius: 150px;
line-height:150px;
font-size: 15px;
background-color: EA7079;
color: white;
left:370px;
}
See? The transitions are applied only when the mouse is over the element because it is in the :hover rule. Thus, it cannot fade back out after the mouse leaves because the transitions are no longer applied. If the transitions are applied to the elements style, it will fade in and out every time the mouse moves over it.
Here is a JSFiddle to show what I mean.
Hope this helps!
It should work if you only have transition on the non-hovered element, according to CSS-tricks
av ul #skills
{
position:absolute;
width: 150px;
height: 150px;
border:6px solid;
border-color:white;
border-radius: 150px;
line-height:150px;
font-size: 15px;
#background-color: EA7079;
background-color: #1A1A1A;
color: white;
left:370px;
/* CSS3 */
-webkit-transition: all 1000ms ;
-moz-transition: all 1000ms ;
-ms-transition: all 1000ms ;
-o-transition: all 1000ms ;
transition: all 1000ms ;
}
nav ul #skills:hover
{
position:absolute;
width: 150px;
height: 150px;
border:6px solid;
border-color: #DCDEE0;
border-radius: 150px;
line-height:150px;
font-size: 15px;
background-color: EA7079;
color: white;
left:370px;
}