Ok I have this code for the html.
<a class="fade fade1" href="#"></a>
<a class="fade fade2" href="#"></a>
<a class="fade fade3" href="#"></a>
and this css for those html element above
a.fade
{
width: 249px;
height: 90px;
float: none;
clear: both;
margin: 8px auto;
overflow: auto;
display: block;
/*fade*/
/* Theoretically for IE 8 & 9 (more valid) */
/* ...but not required as filter works too */
/* should come BEFORE filter */
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
/* This works in IE 8 & 9 too */
/* ... but also 5, 6, 7 */
filter: alpha(opacity=50);
/* Older than Firefox 0.9 */
-moz-opacity:0.5;
/* Safari 1.x (pre WebKit!) */
-khtml-opacity: 0.5;
/* Modern!
/* Firefox 0.9+, Safari 2?, Chrome any?
/* Opera 9+, IE 9+ */
opacity: 0.5;
}
a.fade1
{
background: transparent url(http://jameskbrooks.com/wp- content/uploads/2012/11/MC2151023682-e1353394381773.gif) no-repeat top left;
}
a.fade2
{
background: transparent url(http://jameskbrooks.com/wp- content/uploads/2012/11/MC2151023684-e1353394564665.gif) no-repeat top left;
}
a.fade3
{
background: transparent url(http://jameskbrooks.com/wp- content/uploads/2012/11/MC2151023683-e1353394572666.gif) no-repeat top left;
}
a.fade:hover
{
/*fade*/
/* Theoretically for IE 8 & 9 (more valid) */
/* ...but not required as filter works too */
/* should come BEFORE filter */
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
/* This works in IE 8 & 9 too */
/* ... but also 5, 6, 7 */
filter: alpha(opacity=100);
/* Older than Firefox 0.9 */
-moz-opacity:1.0;
/* Safari 1.x (pre WebKit!) */
-khtml-opacity: 1.0;
/* Modern!
/* Firefox 0.9+, Safari 2?, Chrome any?
/* Opera 9+, IE 9+ */
opacity: 1.0;
-webkit-transition: opacity 600ms linear;
-moz-transition: opacity 600ms linear;
-o-transition: opacity 600ms linear;
transition: opacity 600ms linear;
}
So based on those css3 declared above, by default the a.fade is set to opacity by half and then whenever a user hover or mouseover to those elements, the opacity is set to full with an animation on it like fade in from half opacity to full opacity but the problem is whenever I withdraw my mouse from those element, there is no animation like fade out from full opacity then back to its default opacity which is 50%. I know this could be done by jquery so Im looking someone around here to give me a clue on how to do it. css3 preferred.
Hope I could find something that can solve my issue, thank you.
Im open in any ideas, recommendation and suggestions.
Yes you can do it in jQuery:
$('#container')
.on('mouseover', 'a.fade', function(){
$(this).animate({'opacity': 1}, 500) // animate to 100%, in 500 ms
})
.on('mouseout', 'a.fade', function(){
$(this).animate({'opacity': 0.5}, 500) // animate to 50%, in 500 ms
})
jQuery provides fadeIn() ,fadeOut() and fadeIn() for you to change opacity of any object.
Just trigger fadeIn() ,fadeOut() or fadeIn() for $("a.fade").hover().
For example,
$("a.fade").hover(
function() { $(this).fadeTo("slow", 0.5); },
function() { $(this).fadeTo("slow", 1); }
);
For your reference, http://api.jquery.com/fadeTo/
Related
I'm trying to accomplish the following on my website:
When a button is clicked (onClick), fade out the entire screen to black.
Then fade in from black to load the next page (the URL that the button linked to).
I'm finding solutions to points 1 and 2 separately, but no solution that combines these. See below. Can someone help achieve 1 and 2 following each other?
/*JS code I found online to create a fade out to black onClick */
$(document).ready(function() {
function toggle() {
$('#overlay').toggleClass('backdrop');
}
$('[data-toggle="active"]').click(toggle);
});
/*CSS code #1 I found online to create a fade out to black onClick */
#overlay {
width: 100%;
height : 100%;
opacity : 0;
background: '#000';
top: 0;
left: 0;
transition: opacity .25s;
-moz-transition: opacity .25s;
-webkit-transition: opacity .25s;
}
.backdrop {
opacity: .4 !important;
}
/*CSS code #2 I found online to create a fade in on pageload */
#overlay {
-webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
-moz-animation: fadein 2s; /* Firefox < 16 */
-ms-animation: fadein 2s; /* Internet Explorer */
-o-animation: fadein 2s; /* Opera < 12.1 */
animation: fadein 2s;
}
#keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Firefox < 16 */
#-moz-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Safari, Chrome and Opera > 12.1 */
#-webkit-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Internet Explorer */
#-ms-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<a class="btn btn-default" data-toggle="active" href="nextpage.com">Button</a>
<a class="btn btn-default" data-toggle="active" href="nextpage2.com">Button</a>
<div id="overlay"></div>
</body>
The above JS code goes with CSS code #1, but that only creates a toggle function (source).
For the fade in on page load, I found CSS code #2 as seen above, but that doesn't fade in from black source:
I'm using this plugin for cross-browser compatible grayscale images. Basically, the image is originally in grayscale mode with a low opacity. When the user hovers over the image, the grayscale fades to color, the opacity returns to 1, and a previously hidden div slides up from the bottom.
All of this works fine, however, here is the problem: while the user is hovering over the image, if the cursor is moved to the previously hidden div (.post-info), the image returns back to grayscale. I would like to keep it in color if possible. Also, if there is a more elegant, cross-browser, mobile-friendly way to achieve this, please feel free to share. I'm always trying to learn how to code more elegantly.
Fiddle: http://jsfiddle.net/zg0jf2fb/
HTML
<article>
<div class="post-info" style="display: none;">
<h1 class="entry-title">Test</h1>
</div>
<img width="375" height="375" src="http://i.imgur.com/5Boucbt.jpg" class="grayscale grayscale-fade wp-post-image">
</article>
CSS
article {
float: left;
opacity: .3;
position: relative;
width: 375px;
transition: opacity .2s ease-in-out;
-moz-transition: opacity .2s ease-in-out;
-webkit-transition: opacity .2s ease-in-out;
}
article:hover {
cursor: pointer;
opacity: 1;
}
article .post-info {
background: #000;
bottom: 0;
position: absolute;
text-align: center;
width: 100%;
z-index: 1;
}
/* Grayscale CSS */
.grayscale {
/* Firefox 10+, Firefox on Android */
filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale'><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0'/></filter></svg>#grayscale");
/* IE 6-9 */
filter: gray;
/*
Chrome 19+,
Safari 6+,
Safari 6+ iOS,
Opera 15+
*/
-webkit-filter: grayscale(100%);
}
.grayscale.grayscale-fade {
-webkit-transition: -webkit-filter .2s;
}
.grayscale.grayscale-off,
.grayscale.grayscale-fade:hover {
-webkit-filter: grayscale(0%);
filter: none;
}
.grayscale.grayscale-replaced {
filter: none;
-webkit-filter: none;
}
.grayscale.grayscale-replaced > svg {
opacity: 1;
-webkit-transition: opacity .2s ease;
transition: opacity .2s ease;
}
.grayscale.grayscale-replaced.grayscale-off > svg,
.grayscale.grayscale-replaced.grayscale-fade:hover > svg {
opacity: 0;
}
JS
// Hover titles
$('article').hover( function() {
$(this).find('.post-info').stop().slideDown(100);
}, function() {
$(this).find('.post-info').stop().slideUp(100);
});
The issue is with these two styles:
.grayscale.grayscale-off,
.grayscale.grayscale-fade:hover {
-webkit-filter: grayscale(0%);
filter: none;
}
.grayscale.grayscale-replaced.grayscale-off > svg,
.grayscale.grayscale-replaced.grayscale-fade:hover > svg {
opacity: 0;
}
When you move your cursor to the div you are no longer hovering the img itself and so it returns to grayscale. In order to keep the coloration when you move the cursor onto the div you need to keep the filters off while hovering the article, not just the img, like so:
.grayscale.grayscale-off,
article:hover .grayscale.grayscale-fade {
-webkit-filter: grayscale(0%);
filter: none;
}
.grayscale.grayscale-replaced.grayscale-off > svg,
article:hover .grayscale.grayscale-replaced.grayscale-fade > svg {
opacity: 0;
}
Updated fiddle: http://jsfiddle.net/Lhbfsay7/
I have the following code for my background:
.contact {
#include background(linear-gradient(#3e72ab, #39699d));
color: #fff;
display: none;
height: 500px;
transition: background 1s linear;
-moz-transition: background 1s linear; /* FF 4 */
-webkit-transition: background 1s linear; /* Safari & Chrome */
-o-transition: background 1s linear; /* Opera */
-webkit-backface-visibility: hidden;
And the following JavaScript to change the background when a submit button is clicked:
$(".contact input[type='submit']").click(function() {
$(".contact").css({"background":"#2ea930"});
});
But when I click the submit button there's a white flash. Why is this caused? It flashes white then to green as intended. How do I stop this?
The flash to white happens when the CSS changes and is reloaded. The white flash you see is the transition during the microseconds it takes to rewrite the CSS.
I recommend to layer your transition on top of another background. The "white flash" is really .contact element being fully transparent for a split second.
Pseudo code:
.baseBackground {
background: linear-gradient(#3e72ab, #39699d);
}
.contact {
background: linear-gradient(#3e72ab, #39699d);
}
/* On change for .contact */
.contact {
background-color: #2ea930;
}
<div class="baseBackground">
<div class="contact"> This div changes </div>
</div>
I'm developing a new Joomla 2.5 website and I have to implement a fade effect on the menu for the first level of li only.
Site url: http://goo.gl/Eu9Mt
I added this effect but I have a problem on "Google Chrome" & "Safari" only. When I hover the mouse on a sub menu and move the mouse away but without hover the parent menu the fade effect still exist but when I move the mouse away and the last item I hovered was the parent item, the fade effect execute correctly.
here is my jQuery code:
(function($){
$(document).ready(function () {
$('#ja-mainnav ul.level0 li').not('#ja-mainnav ul.level0 li ul li').append('<div class=\'hover\'><div><\/div><\/div>');
$('#ja-mainnav ul.level0 li').not('#ja-mainnav ul.level0 li ul li').hover(
function() {
$(this).children('div').stop(true, true).fadeIn('1000');
},
function() {
$(this).children('div').stop(true, true).fadeOut('fast');
}).click (function () {
$(this).addClass('selected');
});
});
})(jQuery);
Please advise
add this on your css:
#ja-mainnav li.haschild .hover {
background-image: none;
}
#ja-mainnav li.haschild-over.over .hover {
background-image: url("../../images/nav/menu_over.gif");
}
#ja-mainnav li.haschild .hover div {
background-image: none;
}
#ja-mainnav li.haschild-over .hover div {
background-image: url("../../images/nav/menu_overspan.gif");
}
to add a transition with pure css, you can apply this on the hover stage (for example):
-webkit-transition: all 0.3s ease-out; /* Safari 3.2+, Chrome */
-moz-transition: all 0.3s ease-out; /* Firefox 4-15 */
-o-transition: all 0.3s ease-out; /* Opera 10.5–12.00 */
transition: all 0.3s ease-out; /* Firefox 16+, Opera 12.50+ */
no IE support I'm afraid
hope this helps
I'm currently trying to rotate an image on this site http://theflouringartisans.com/ The goal is to have the arrow images at the top rotate when the contact form is expanded and rotate again when the form is collapsed. This is the code I currently have:
$(document).ready(function(){
$("#contactbutton").click(function(){
if ($("#contact").is(":hidden")){
$("#contact").slideDown("slow");
$(".arrow").rotateRight(180);
}
else{
$("#contact").slideUp("slow");
$(".arrow").rotateRight(180);
}
});
});
function closeForm(){
$("#thankyou").show("slow");
setTimeout('$("#thankyou").hide();$("#contact").slideDown("slow")', 2000);
}
I would also like to have the div #thankyou to fade out after 5 seconds from the form being submitted.
Any help is greatly appreciated and I thank you for your time!
I never heard jQuery function called rotateRight(), but you can do this with css3 rotate and some jQuery mix.
here is css3 rotating animation example, mouse over the green box here.
jQuery:
$(document).ready(function(){
$("#contactbutton").click(function(){
if ($("#contact").is(":hidden")){
$("#contact").slideDown("slow");
$(".arrow").addClass('rotateRight');
}else{
$("#contact").slideUp("slow");
$(".arrow").removeClass('rotateRight');
}
});
});
css:
.rotateRight {
transform: rotate(180deg);
-ms-transform: rotate(180deg); /* IE 9 */
-webkit-transform: rotate(180deg); /* Safari and Chrome */
-o-transform: rotate(180deg); /* Opera */
-moz-transform: rotate(180deg); /* Firefox */
/* if you want to do this move with animate use transition */
transition: .5s;
-moz-transition: .5s; /* Firefox 4 */
-webkit-transition: .5s; /* Safari and Chrome */
-o-transition: .5s; /* Opera */
}