jQuery mouseover function on multiple elements with a delay - javascript

I have 3 spans wrapped in a div. When a user hovers over the dive, I want each span to move slightly to the right, with a delay of .5s between each.
Here is my current code:
$('.library_vid').mouseover(function(){
$(this).find('.lesson_meta span:nth-child(1)').css('margin-right', '30px');
setTimeout(function () {
$(this).find('.lesson_meta span:nth-child(2)').css('margin-right', '30px');
}, 500);
setTimeout(function () {
$(this).find('.lesson_meta span:nth-child(3)').css('margin-right', '30px');
}, 1000);
})
However, currently this just moves the first span, the delay never amounts to anything

$('.library_vid').mouseover(function() {
var parent = $(this)
parent.find('.lesson_meta span:nth-child(1)').css('margin-left', '30px');
setTimeout(function() {
parent.find('.lesson_meta span:nth-child(2)').css('margin-left', '30px');
}, 500);
setTimeout(function() {
parent.find('.lesson_meta span:nth-child(3)').css('margin-left', '30px');
}, 1000);
})
div {
width: 130px;
height: 300px;
}
span {
height: 100px;
width: 100px;
display: inline-block;
}
.span1 {
background-color: green;
}
.span2 {
background-color: blue;
}
.span3 {
background-color: purple;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="library_vid">
<div class="lesson_meta">
<span class="span1"></span>
<span class="span2"></span>
<span class="span3"></span>
</div>
</div>
I think the issue was the $(this) nested within your set timeouts. Declaring it as a variable is a common 'cheat'. Also, you said you wanted to move them to the right, but were adding margin on the right

jquery animate Jquery Animate would help out instead of using setTimeout , you can set the time interval or use the default timing intervals ,like the one below slow
// Add your javascript here
$(function(){
$('.library_vid').mouseover(function(){
$(this).find(".lesson_meta").animate({
"margin-right": "30px"
},"slow");
});
});
h1 {
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="library_vid">
<span class="lesson_meta">span 1</span>
<span class="lesson_meta">span 2</span>
<span class="lesson_meta">span 3</span>
</div>

you can probably do this with css if that makes it easier for you.
.library_vid:hover .lesson_meta span:nth-child(1) {
margin-right: 30px;
-webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-ms-transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
}
.library_vid:hover .lesson_meta span:nth-child(2) {
margin-right: 30px;
-webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-ms-transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
}
.library_vid:hover .lesson_meta span:nth-child(3) {
margin-right: 30px;
-webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-ms-transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
}
here is the jsfiddle link
https://jsfiddle.net/jpju2my1/
i dont know how your html is formatted so i just made some stuff up based on what you were describing

Related

How to get a callback for css3 transition end?

I am trying the following but I get no callback at all
$("#panel").addClass("showPane");
$("#close_wikipedia").on("click", function() {
$("#panel").addClass("close_wiki");
});
if ($("#panel").hasClass("close_wiki")) {
$(this).bind("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function() {
$("#panel").removeClass("close_wiki showPane");
});
}
#panel {
position: fixed;
background: #444;
height: 100%;
width: 50vw;
right: -100vw;
transition: right 0.4s ease-in-out;
-o-transition: right 0.4s ease-in-out;
-ms-transition: right 0.4s ease-in-out;
-moz-transition: right 0.4s ease-in-out;
-webkit-transition: right 0.4s ease-in-out;
z-index: 9999;
top: 0;
bottom: 0;
height: 100vh;
overflow-y: auto;
}
#panel.showPane {
right: 0;
}
#panel.close_wiki {
right: -100vw;
transition: right 0.4s ease-in-out;
-o-transition: right 0.4s ease-in-out;
-ms-transition: right 0.4s ease-in-out;
-moz-transition: right 0.4s ease-in-out;
-webkit-transition: right 0.4s ease-in-out;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="panel">
<h2>Wikipedia results</h2>
<div class="panel-group" id="accordionWiki" role="tablist" aria-multiselectable="true"></div>
<button id="close_wikipedia" type="button" class="btn btn-danger">Close Wiki</button>
</div>
The issue is because you only check if #panel has the close_wiki class when the pages loads - which will never fire as it's added on button click.
Instead hook the transitionEnded event onload and wait for it to fire after the CSS transition completes. Also note that bind() is deprecated. You should use on() instead. Try this:
$("#close_wikipedia").on("click", function() {
$("#panel").removeClass("showPane");
});
#panel {
position: fixed;
background: #444;
height: 100%;
width: 50vw;
right: -100vw;
transition: right 0.4s ease-in-out;
-o-transition: right 0.4s ease-in-out;
-ms-transition: right 0.4s ease-in-out;
-moz-transition: right 0.4s ease-in-out;
-webkit-transition: right 0.4s ease-in-out;
z-index: 9999;
top: 0;
bottom: 0;
height: 100vh;
overflow-y: auto;
}
#panel.showPane {
right: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="panel" class="showPane">
<h2>Wikipedia results</h2>
<div class="panel-group" id="accordionWiki" role="tablist" aria-multiselectable="true"></div>
<button id="close_wikipedia" type="button" class="btn btn-danger">Close Wiki</button>
</div>
Also note that you can make the logic much simpler (and remove the need to hook to transitionEnded at all by just toggling the showPane class on the #Panel element.
$('#panel').addClass('showPane');
$("#close_wikipedia").on("click", function() {
$("#panel").removeClass("showPane");
});
#panel {
position: fixed;
background: #444;
height: 100%;
width: 50vw;
right: -100vw;
transition: right 0.4s ease-in-out;
-o-transition: right 0.4s ease-in-out;
-ms-transition: right 0.4s ease-in-out;
-moz-transition: right 0.4s ease-in-out;
-webkit-transition: right 0.4s ease-in-out;
z-index: 9999;
top: 0;
bottom: 0;
height: 100vh;
overflow-y: auto;
}
#panel.showPane {
right: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="panel">
<h2>Wikipedia results</h2>
<div class="panel-group" id="accordionWiki" role="tablist" aria-multiselectable="true"></div>
<button id="close_wikipedia" type="button" class="btn btn-danger">Close Wiki</button>
</div>
You need to not chekc for the close_wiki class on page load and bind event based on it. Since this class is added dynamically on the close_wikipedia click. you can use event delegation to achieve the call back of transition event when close_wiki is clicked.
$("#panel").addClass("showPane");
$("#close_wikipedia").on("click", function() {
$("#panel").addClass("close_wiki");
});
$(document).on("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd",".close_wiki", function() {
alert("called");
$("#panel").removeClass("close_wiki showPane");
});
#panel {
position: fixed;
background: #444;
height: 100%;
width: 50vw;
right: -100vw;
transition: right 0.4s ease-in-out;
-o-transition: right 0.4s ease-in-out;
-ms-transition: right 0.4s ease-in-out;
-moz-transition: right 0.4s ease-in-out;
-webkit-transition: right 0.4s ease-in-out;
z-index: 9999;
top: 0;
bottom: 0;
height: 100vh;
overflow-y: auto;
}
#panel.showPane {
right: 0;
}
#panel.close_wiki {
right: -100vw;
transition: right 0.4s ease-in-out;
-o-transition: right 0.4s ease-in-out;
-ms-transition: right 0.4s ease-in-out;
-moz-transition: right 0.4s ease-in-out;
-webkit-transition: right 0.4s ease-in-out;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="panel">
<h2>Wikipedia results</h2>
<div class="panel-group" id="accordionWiki" role="tablist" aria-multiselectable="true"></div>
<button id="close_wikipedia" type="button" class="btn btn-danger">Close Wiki</button>
</div>

Transition from darkened image to non-darkened on mouse over with CSS/Javascript?

I´m trying to get the inverse effect of this code (jsfiddle-demo):
a.darken {
display: inline-block;
background: black;
padding: 0;
}
a.darken img {
display: block;
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
-ms-transition: all 0.5s linear;
-o-transition: all 0.5s linear;
transition: all 0.5s linear;
}
a.darken:hover img {
opacity: 0.7;
}
div.hoverText{display = none;}
I mean, I want a html code where its images are darkened and the darkeness disappears «on mouse over» -with a transition.
You just have to invert the opacity values :)
(the "base" background must have opacity < 1, and the ":hovered" background must have opacity = 1)
Here's a fork of you fiddle : http://jsfiddle.net/m1mcb66h/
a.darken img {
[...]
opacity: 0.7;
}
a.darken:hover img {
opacity: 1;
}
I think this should do the trick
instead of
opacity:0.7;
write
filter: contrast(150%);
I am assuming your .html is as follows:
<a class='darken'><img src='image1.jpg'></a>
<a class='darken'><img src='image2.jpg'></a>
I solved it like this:
a.darken {
display: inline-block;
background: black;
padding: 0;
}
a.darken img{
display: block;
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
-ms-transition: all 0.5s linear;
-o-transition: all 0.5s linear;
transition: all 0.5s linear;
}
a.darken:hover img{
opacity: 0.7;
}
div.hoverText{display = none;}
Your last pseudoclass works fine also like this:
a.darken img:hover{
opacity: 0.7;
}
Please, provide .html for future questions.

My hover transition isn't smooth on first try

I have a call to action button made of text that has an arrow > in it. I wanted the arrow to transition smoothly to the right on hover and then go back in place on hover out. Here's the HTML, CSS, and jQuery for the CTA button:
$("#lnkTech").hover(function(){
$("#lnkTech > .spnCTATxtArrow").removeClass("arrowAnimateOut");
$("#lnkTech > .spnCTATxtArrow").addClass("arrowAnimateIn");
},function(){
$("#lnkTech > .spnCTATxtArrow").removeClass("arrowAnimateIn");
$("#lnkTech > .spnCTATxtArrow").addClass("arrowAnimateOut");
});
/* CTA Styles */
.divCTA {
background-color: #00AA7E;
padding: 20px 0px;
text-align: center;
width: 12em;
font-weight: bold;
text-transform: uppercase;
font-size: 0.8em;
margin-left: auto;
margin-right: auto;
}
.divCTA:hover {
background-color: #009E75;
}
.divCTA a {
color: #fff;
text-decoration: none;
}
.divCTA a:hover {
color: #fff;
text-decoration: none;
}
.spnCTATxt {
position: relative;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
.spnCTATxtArrow {
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
.arrowAnimateIn {
position: relative;
left: 15px;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
.arrowAnimateOut {
position: relative;
left: 0px;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
.arrowAnimate {
position: relative;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
<div class="divCTA">
<span class="spnCTATxt">Learn More <span class="spnCTATxtArrow" id="lnkTechArrow">></span></span>
</div>
What happens is upon load or refresh, the arrow quickly jumps top the right on first hover, then the transition kicks in on hover out, and on subsequent hovers, the transition works. I would like the transition to work every time, even on the first hover. I've even added the transition CSS to all the containers but I still get the same result.
Please help me fix this :(
the solutions is quite simple , you need to set an initial value to the element to the hover effect would start from this value to the transform value
so add to your css
#lnkTech > .spnCTATxtArrow{
left:0px;
}

Hover effect is under the image

So I'm struggling with hover effect. The black box is the image and I want the red mask color (which has the same width and height) to be placed in front of the black box whenever user will hover on that image, I cannot do this because it seems the effect is under the image whenever I hover mouse on that image....
.third-effect .mask {
opacity: 0;
overflow: visible;
border: 100px solid rgba(0, 0, 0, 0.7);
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
width: 274px;
height: 197px;
}
.third-effect a.info {
position: relative;
top: -10px;
opacity: 0;
-webkit-transition: opacity 0.5s 0s ease-in-out;
-moz-transition: opacity 0.5s 0s ease-in-out;
-o-transition: opacity 0.5s 0s ease-in-out;
-ms-transition: opacity 0.5s 0s ease-in-out;
transition: opacity 0.5s 0s ease-in-out;
}
.third-effect:hover .mask {
opacity: 1;
border: 100px solid rgba(0, 0, 0, 0.7);
}
.third-effect:hover a.info {
opacity: 1;
-moz-transition-delay: 0.3s;
-webkit-transition-delay: 0.3s;
-o-transition-delay: 0.3s;
-ms-transition-delay: 0.3s;
transition-delay: 0.3s;
}
<section class="module content">
<div class="view third-effect">
<img src="images/chronos.png" />
<div class="mask">
Full Image
</div>
</div>
</div>
</div>
In your css, you can use the :hover selector to modify the style of your element when your mouse hovers it.
Take a look at this example to see how you can use it.
http://jsfiddle.net/wof159fh/
.third-effect .mask {
opacity: 0;
overflow:visible;
border:100px solid rgba(0,0,0,0.7);
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
width:274px;
height:197px;
}
.third-effect a.info {
position:relative;
top:-10px;
opacity: 0;
-webkit-transition: opacity 0.5s 0s ease-in-out;
-moz-transition: opacity 0.5s 0s ease-in-out;
-o-transition: opacity 0.5s 0s ease-in-out;
-ms-transition: opacity 0.5s 0s ease-in-out;
transition: opacity 0.5s 0s ease-in-out; }
.third-effect:hover .mask {
opacity: 1;
border:100px solid rgba(0,0,0,0.7);
}
.third-effect:hover a.info {
opacity:1;
-moz-transition-delay: 0.3s;
-webkit-transition-delay: 0.3s;
-o-transition-delay: 0.3s;
-ms-transition-delay: 0.3s;
transition-delay: 0.3s;
}
<section class="module content">
<div class="view third-effect">
<img src="images/chronos.png" >
<div class="mask">
Full Image
</div>
</div>
</div>
</div>
You can do it this way
#image {
background-image: url('http://lorempixel.com/400/200/');
width: 300px;
background-size: cover;
height: 300px;
}
#image:hover {
background-color: red;
background-image: none;
}
<div id="image"></div>
Im not sure if you want the overlaid div to be clickable or what. You can use javascript to set stuff up. So you can add a transparent color to the "hover" which would mask it in some color. ex: set opacity 0.8 with red.
Also there is the approach i did. http://jsfiddle.net/kv0fsLs2/
<div id="outer">
<div id="image"></div>
<div id="hover"></div>
</div>
#image {
background-color:red;
}
#hover {
position:absolute;
background-color: blue;
}
div > div {
width: 100px;
height: 100px;
top: 0px;
left: 0px;
}
#outer {
position:relative;
left: 250px;
top: 250px;
}
this way you can tie a click handler to the overlaid div, if you didnt want to do it to the actual item.
Edit: Here you can see it using opacity.... http://jsfiddle.net/kv0fsLs2/1/ All you would need to do is have the image be there instead of a red background as i did in the simplest of examples.
Edit 2: Here is another fiddle, actually using an image: http://jsfiddle.net/kv0fsLs2/2/

jQuery hide().slideDown() does not work when I have CSS animations enabled

I'm new to this.
I used jQuery to make three divs (buttons) slideDown at page load. Then I made them expand a little (downwards) when mouseover'd. This worked well in Safari but not in Firefox. So I changed around a few things.
Now I have CSS animations to make them expand on hover and a jQuery function to make them slideDown on load. But this slideDown doesn't seem to work properly.
HTML:
<div class="header">
<div class="button_container">
<div class="header_button home_button">Back to Home</div>
<div class="header_button projects_button">Projects</div>
<div class="header_button resume_button" >Resume</div>
</div>
</div>
CSS:
.header_button {
display: inline-block;
height: 130px;
line-height: 130px;
width: 300px;
background-color: lightgrey;
color: black;
box-shadow: 0 0 10px;
-moz-transition: 0.5s all ease-in-out;
-ms-transition: 0.5s all ease-in-out;
-webkit-transition: 0.5s all ease-in-out;
-o-transition: 0.5s all ease-in-out;
}
.header_button:hover {
background-color: lightyellow;
height: 140px;
-moz-transition: 0.5s all ease-in-out;
-ms-transition: 0.5s all ease-in-out;
-webkit-transition: 0.5s all ease-in-out;
-o-transition: 0.5s all ease-in-out;
}
Some of the stuff has been copy-pasted from all over Stack Overflow. But now I've got the hover-expand thing working.
jQuery:
$(document).ready(function() {
$('.header_button').hide().slideDown('slow');
});
Convenient jsFiddle.
Updated Fiddle
Check this code,
$(document).ready(function() {
$('.header_button').parent().hide().slideDown('slow');
});
Though you hide .header_button it has parent <a> which is still visible.

Categories