There are a few answers to similar questions, but none that are working for me while still giving me the desired effect, or none that I understand. So any help or guidance would be great
Here's a fiddle: http://jsfiddle.net/csoh1vzb/
Essentially what happens is when you hover over the cells quickly, the mouseleave function doesn't run and I'm left with the active state.
I've "half fixed" this, but it's still not as I would like it to be.
Adding this to mouseenter fixes the problem on the next hover:
$('.cell .hover').fadeOut();
$('.cell span').animate({ "marginTop" : "500px" });
(Not really a fix)
Any help would be great!
The problem is not the not fired mouseleave, the problem you are facing is that the animation takes 400ms (the default animation duration) to complete, which means that the animation is overriding the mouseleave css change directly after it has been applied when you leave the field within say 300ms
To avoid this, you need to stop the animation.
$('.cell span').stop();
$('.cell .hover').fadeOut();
Should do the trick.
As a Sidenote, if you're doing animations with javascript, better change to velocity.js which is far faster than jQuery's animate.
Whenever possible, it is always better to avoid the use of javascript and prefer using css rules.
You can easily replace your html generation and your fade animation using basic html and css, as you can see on this jsfiddle
Writing fully your html :
<a href="" class="cell cell-01" title="ONE">
<div class="hover"><span>ONE</span></div>
</a>
<a href="" class="cell cell-02" title="TWO">
<div class="hover"><span>TWO</span></div>
</a>
And defining most of the rules in your css :
.cell {width: 200px; height: 200px; background: #f00; float: left; display: block; overflow: hidden;}
.cell:hover .hover {
display:inline-block;
opacity: 1;
transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out;
}
.hover {
display:inline-block;
width: 200px;
height: 200px;
background: #000;
text-align: center;
opacity: 0;
transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out;
}
.hover span {display: inline-block; padding: 10px 20px; font: bold 12px arial; font-style: italic; text-transform: uppercase; background: #222; border: 2px solid #fff; color: #fff;}
And you can easily reduce the size of your javascript, making the entire thing more stable and fast.
(function ($) {
$('.cell').on('mouseenter', function (){
var $this = $(this);
$(this).find('span').stop(true, false).animate({ "marginTop" : ($(this).innerHeight() / 2 - 19) + "px" });
}).on('mouseleave', function (){
var $this = $(this);
$(this).find('span').animate({ "marginTop" : "500px" });
});
}(jQuery));
Personally the first answer above is probably simpler and thus a better answer. But I like this because the code seems a bit cleaner overall.
HTML:
<div class="cell"> <span>ONE</span>
</div>
<div class="cell"> <span>TWO</span>
</div>
CSS:
.cell {
width: 200px;
height: 200px;
background: #f00;
float: left;
display: block;
overflow: hidden;
position:relative;
}
.hover {
width: 200px;
height: 200px;
background: #000;
text-align: center;
position: absolute;
top:-200px;
}
.hover span {
display: inline-block;
padding: 10px 20px;
font: bold 12px arial;
font-style: italic;
text-transform: uppercase;
background: #222;
border: 2px solid #fff;
color: #fff;
}
JavaScript:
(function ($) {
$('.cell').on('mouseenter', function () {
$(this).find('span').stop().animate({
"marginTop": ($(this).innerHeight() / 2 - 19) + "px"
});
$(this).find('.hover').stop().animate({
"top": 0
});
}).on('mouseleave', function () {
var $this = $(this);
$(this).find('.hover').stop().animate({
"top": "-200px"
});
$(this).find('span').animate({
"marginTop": "0px"
});
});
}(jQuery));
Related
With my current code, the white bar header is at the top when the page loads up. When you scroll, it fades, and when you scroll to the top, the white header is back. So I've made some progress.
What I'm trying to get is for there to be a transparent header when the scroll is at the top: (https://i.imgur.com/5DiVZpp.png)
And for the white bar header, the main one, to be sticky and follow all the way down, like this: (https://i.imgur.com/lhlGsW6.png)
and when you scroll back up, for it to fade back to the transparent header.
CSS:
#header{position:fixed;
left:0;top:0;right:0;height:106px;z-index:100;
-webkit-transition:background-color 0.2s ease-in-out;
-moz-transition:background-color 0.2s ease-in-out;
-ms-transition:background-color 0.2s ease-in-out;
-o-transition:background-color 0.2s ease-in-out;
transition:background-color 0.2s ease-in-out
}
#header .logo{position:absolute;left:0;top:0;width:162px;height:106px}
#header .logo a{display:block;position:absolute;left:50%;top:50%;
margin:-30px 0 0 -60px;width:120px;height:60px;
text-indent:-99999px;
background-image:url("header_logo.png")}
#header.scroll{border-bottom:1px solid #ededed;background:#fff;} /* so this is the transparent header?
#header.scroll .logo a{background-image:url("header_logo_transp.png")}
Javascript:
$(window).scroll(function () {
var sc = $(window).scrollTop()
if (sc == 0) {
$("#header").addClass("scroll");
//document.removeElementbyId(header); when I put this line in, the header wasn't there when the page first loads up-- kind of what I want, but I want the secondary header to be up there when sc==0
}
else {
$("#header").removeClass("scroll");
}
});
HTML:
<div id="header" class="scroll" style="top: 0px;">
<h1 class="logo">WEBSITE</h1>
The issue you're having may be due to the nature of 'scroll'. It doesn't get every single pixel value. Changing your if statement a little to include 1 as a check will help ensure the classes are added and removed when they should be.
Example: https://codepen.io/SROwl/pen/Mdbwpy
HTML:
<div class="container">
<div class="nav top">Nav Top</div>
</div>
SCSS:
body {
background: #000;
padding: 0;
margin: 0;
}
.container {
height: 4000px;
}
.nav {
background: lightgray;
padding: 15px;
height: 50px;
width: 100%;
border: 1px solid gray;
transition: 250ms ease;
&.top {
color: #fff;
background: transparent;
}
&.fixed {
position: fixed;
background: #fff;
}
}
jQuery:
$(window).on('scroll', function(){
var winTop = $(window).scrollTop(),
if (winTop >= 1) {
$('.nav').addClass('fixed').removeClass('top');
} else if (winTop <= 0) {
$('.nav').addClass('top').removeClass('fixed');
}
})
I cannot figure out how to change the colour of my menu elements when the "center" container or the "right" container is clicked (returning its state once clicked on again).
Currently my 3 lines that are within my menu are white, I want to change them to red when these "center" and "right" containers are clicked.
HTML for menu and containers:
<div class="menu">
<div class="line"></div>
<div class= "container" id= "center">
<h1 style="color:white"><a>LOREM IPSUM<a/></h1>
</div>
<div class="container" id= "right">
<h1 style="color:white"><a>LOREM IPSUM</a></h1>
</div>
CSS for menu elements:
.menu .line {
height: 5px;
width: 40px;
background: #fff;
position: absolute;
top: 22.5px;
left: 5px;
-webkit-transition: all 250ms linear;
transition: all 250ms linear;
z-index: 100;
}
.menu .line:after, .menu .line:before {
content: ' ';
height: 5px;
width: 40px;
background: #fff;
position: absolute;
-webkit-transition: all 250ms linear;
transition: all 250ms linear;
}
.menu .line:before {
top: -10px;
}
.menu .line:after {
bottom: -10px;
}
Define new classes for the colors you want, e.g.
.red {
color: red !important;
}
.green {
color: green !important;
}
Then toggle them using jQuery:
$('#center').click(function() {
$(this).find('h1').toggleClass('red');
});
$('#right').click(function() {
$(this).find('h1').toggleClass('green');
});
Note: If you assign the original color using CSS then you don't need the !important.
I was unable to make sense of your sample html, so here's is an example demo using jQuery's .toggleClass
Add an onClick() method
Html:
<h1 style="color:white" onclick="changeColor(this);"><a>LOREM IPSUM<a/></h1>
and add this function in the <script> tag:
function changeColor(element){
element.style.color='red';
}
JSfiddle
Here is a fiddle for what I am trying to do. I am trying to use pure css with exception of jquery to toggle the appropriate class and let the css transitions handle the rest. I know this isn't supported by old IE's which is fine with me at this point.
What is happening is for when ever I click the link text the on/off the slider moves and eases just fine. However, when I hit the actual slider portion of the button it moves over suddenly with no easing. Here is the code:
HTML
<a href="#" class="on-off">
<span class="on">ON</span>
<span class="off">OFF</span>
<span class="slider right ease"></span>
</a>
CSS
.on-off {
display: inline-block;
position: relative;
padding: 5px;
background: #ff8600;
border-radius: 5px;
border: 1px solid #b8baba;
}
.on-off .on {
margin-right: 10px;
}
.slider {
position: absolute;
width: 50%;
height: 100%;
background: #fff;
z-index: 2;
border-radius: 5px;
border: 1px solid #b8baba;
}
.right {
top: 0;
right: 0;
}
.left {
top: 0;
right: 50%;
}
.ease {
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-ms-transition: all .5s ease;
-o-transition: all .5s ease;
transition: all .5s ease;
}
Javascript
$('.on-off').on('click', function() {
$slider = $('.slider');
if ($slider.hasClass('right')) {
$('.slider').removeClass('right');
$('.slider').addClass('left');
} else {
$('.slider').removeClass('left');
$('.slider').addClass('right');
}
})
This does work in chrome/firefox just fine. Just not IE10/11. I am trying to use graceful degradation. Keep things lightweight so if css can handle it not to use javascript where also it has basic functionality it just might toggle rather than ease in unsupported browsers. I know IE10/11 supports ease as it is working. just not when I click that particular area of the button.
Thanks for the help.
Hey this is going to sound dumb, but here's the solution
$('.on-off').on('click', function() {
$slider = $('.slider');
if ($slider.hasClass('right')) {
$('.slider').addClass('left');
$('.slider').removeClass('right');
} else {
$('.slider').addClass('right');
$('.slider').removeClass('left');
}
});
Add before you remove, and add a semicolon to your function.
I would like to create a navigation that reveals on hover however I am not sure how to go about doing it. I would like to do it how they have done it in the top left hand corner when you hover on the name: http://higz.ghosted.net/
I would like it to be just like the example and the menu which display to be a list so <ul> <li>
Here is an example related to what you are looking at- still there some issue you have to fix, but i have giving you the quick start.
final result -
http://jsbin.com/parok/4/edit?html,css,js,output
HTML -
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div id='navigation'>
<div class='logo'></div>
<div class='menus'>
<ul>
<li><a href='#'>Home page</a></li>
<li><a href='#'>About</a></li>
<li><a href='#'>Service</a></li>
<li><a href='#'>Contact</a></li>
</ul>
</div>
</div>
</body>
</html>
CSS -
body {margin:0; padding: 0;}
#navigation {
width: 500px;
height: 100px;
background: wheat;
border-radius: 5px;
}
.logo {
width: 100px;
height: 100px;
background: red;
border-radius: 50px;
float:left;
margin-right: 20px;
font-size: 20px;
text-align:center;
color: white;
display: block;
}
.logo p {
margin-top: 30px;
}
.menus {
position: relative;
opacity: 0;
top: 40px;
}
.logo:hover {
cursor: pointer;
}
.menus a:link, .menus a:visited {color: darkgray; text-decoration: none; text-transform: uppercase;}
.menus ul {
list-style:none;
}
.menus ul li {
display: inline-block;
padding-right: 15px;
}
jQuery -
$(function(){
$('.logo').mouseover(function(){
//console.log('foo');
$('.menus').animate({
'opacity': 1,
'left': '20px'
}, 500);
}).mouseout(function(){
//console.log('bar');
$('.menus').animate({
'opacity': 0,
'left': '0px'
}, 500);
});
});
Use jquery and ajax if you want to do it Asynchronously. I prefer do it by calculating the navigation at run time using ajax provided they are not static pages. (depends on server side language you are using)
Otherwise just use jquery to do this.
With the hover event of jQuery you show the navigation and on just hide it :
$("#id").hover(function(){
$("#id").show();
});
$("#id").mouseleave/blur(function(){
$("#id").hide();
});
and do paste your code where you want to achieve it. Otherwise we can only put up theory here. We are not supposed to write entire code.
This is not a hard task to achieve..
Lets get started:
Step 1) Build a sample html content to be displayed on hover
<div class="toggle-display">
Your HTML
</div>
Step 2) Lets give it some css
.toggle-display {
opacity: 0.1; /*set to 0.0 to hide it completely */
width: 200px;
height: 50px;
border: 1px solid #333;
/* transitions */
-o-transition: all .3s linear;
-webkit-transition: all .3s linear;
-moz-transition: all .3s linear;
transition: all .3s linear;
}
.toggle-display:Hover {
opacity: 1.0;
}
3) Put it all together
<html>
<head>
<style>
.toggle-display {
opacity: 0.1; /*set to 0.0 to hide it completely */
width: 200px;
height: 50px;
border: 1px solid #333;
/* transitions */
-o-transition: all .3s linear;
-webkit-transition: all .3s linear;
-moz-transition: all .3s linear;
transition: all .3s linear;
}
.toggle-display:Hover {
opacity: 1.0;
}
</style>
</head>
<body>
<div class="toggle-display">
Your content
</div>
</body>
</html>
Here is a sample
Tried and works fine,
Hope this helped you (If so, mark this answer as ok please),
Best regards.
Alberto
Use Jquery:
$('.blog_title').on('mouseenter', function(){
$('ul').show();
});
In reality you want to animate and not just show(). It looks like the menu fades in and moves from the left.
Also you want to give your ul a class name otherwise this code will affect all the ul's in the HTML.
And you do the reverse on 'mouseleave'.
In some DVD/Video players, the controls for play/pause/volume/etc are overlaid on top of the video itself in a box. The controls fade in when you move the mouse, and then, after some delay, fades back out (so you can enjoy the video again).
I am wondering -- how to create this effect using CSS? Is there a way to reset the fade-out timer on events other than body mouse move?
Let's say we have the following HTML template:
<div class="player">
<div class="controls">Controls go here</div>
</div>
It is possible if you use CSS transition-delay: http://jsfiddle.net/teddyrised/7sBwA/
.player {
background-color: #333;
position: relative;
width: 100%;
height: 400px;
}
.controls {
background-color: rgba(0,0,0,.5);
border-radius: 5px;
color: #eee;
padding: 1em;
position: absolute;
left: 2em;
right: 2em;
bottom: 2em;
text-align: center;
pointer-events: none;
opacity: 0;
transition: opacity .5s ease-in-out;
transition-delay: 0;
}
.player:hover .controls {
pointer-events: auto;
opacity: 1;
}
.player:not(:hover) .controls {
transition-delay: .5s;
}
However, if you want better browser support, you should use JS instead.
When using jQuery, you can exploit the .delay() method when using jQuery effects, such as .fadeOut() in our example: http://jsfiddle.net/teddyrised/g7kge/
JS:
$(document).ready(function(){
$(".player .controls").hide();
$(".player").hover(
function(){
// Mouse enters. Fade in controls
$(this).find(".controls").fadeIn();
},
function(){
// Mouse leaves. Delay controls fade out by 1000ms
$(this).find(".controls").delay(1000).fadeOut();
});
});
It is possible to control the fade-out timer using CSS with:
-(prefix)-transition: all <duration> ease-out <delay>;
Take a look at this fiddle.