I'm trying to use this jQuery to activate my css transitions. Also, upon hovering over the div "box", I wanted this to activate the fade in of another div called "box_content".
Any help would be appreciated. Thanks!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>test</title>
<style>
div.box{
top: 0;
left: 0;
width: 100px;
height: 100px;
background: #0F0;
opacity: .3;
-webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
}
div.box.active{
opacity: 1;
}
div.box_content{
-webkit-transition: all 1.5s ease-in-out;
-moz-transition: all 1.5s ease-in-out;
transition: all 1.5s ease-in-out;
opacity: 0;
}
div.box_content.active {
opacity: 1;
}
</style>
<script>
$(document).ready(function()
$('div.box').hover(function() {
$('div.box').toggleClass('active');
$('div.box_content').toggleClass('active');
}
</script>
</head>
<body>
<div class="box"></div>
<div class="box_content">Content</div>
</body>
You had some syntax errors in your jQuery. If you fix those, it works.
http://jsfiddle.net/michaeljimmy/brmF3/
$(document).ready(function() {
$('div.box').hover(function() {
$('div.box').toggleClass('active');
$('div.box_content').toggleClass('active');
});
});
Here you go. :) You were missing a few curly brackets that was throwing an error.
You can play around with it here:
$(function() {
$('div.box').hover(function() {
$(this).toggleClass('active');
$('div.box_content').toggleClass('active');
});
});
Related
I have set up css animation for my background images, it works fine on chrome but not on firefox and safari, do you have any idea how to make this work?
Homepage: http://argeville.projet-inwie.com/
My css for animation:
#test1
{ transition: background 0.4s ease-in-out;
-webkit-transition: background 0.4s ease-in-out;
-o-transition: background 0.4s ease-in-out;
-moz-transition: background 0.4s ease-in-out; -ms-transition: background 0.4s ease-in-out;
}
Thank's
Maybe more code and details could help...
First thing, check this tool when you need to make your CSS compatible with "all" browsers.
Autoprefixing tool
Check this post too: https://css-tricks.com/almanac/properties/t/transition/
As they say: IE10 (the first stable version of IE to support transition) does not require the -ms- prefix.
So this code is enought:
#test1 {
-webkit-transition: background 0.4s ease-in-out;
-o-transition: background 0.4s ease-in-out;
transition: background 0.4s ease-in-out;
}
Maybe try to install the latest version of browsers that don't work well.
Empty browser cache?
Try to apply another property instead of background to deduce if it's transition or background property that makes trouble.
Happy coding!
Thanks for your help.
I tried your code but it still doesn't work.
Here is the set of code to manage the different background of my home with the passage of the mouse.
<script>
document.addEventListener('DOMContentLoaded', function() {
jQuery(function($){
$('.test2').mouseenter(function() {
$('#test1').css('background-image','url(/wp-content/uploads/2021/04/ingredients.jpg)');
});
$('.test2').mouseleave(function() {
$('#test1').css('background-image','url(/wp-content/uploads/2021/04/ingredients.jpg)');
});
$('.test3').mouseenter(function() {
$('#test1').css('background-image','url(/wp-content/uploads/2021/04/aromes.jpg)');
});
$('.test3').mouseleave(function() {
$('#test1').css('background-image','url(/wp-content/uploads/2021/04/ingredients.jpg)');
});
$('.test5').mouseenter(function() {
$('#test1').css('background-image','url(/wp-content/uploads/2021/04/centres.jpg)');
});
$('.test5').mouseleave(function() {
$('#test1').css('background-image','url(/wp-content/uploads/2021/04/ingredients.jpg)');
});
$('.test4').mouseenter(function() {
$('#test1').css('background-image','url(/wp-content/uploads/2021/04/parfums.jpg)');
});
$('.test4').mouseleave(function() {
$('#test1').css('background-image','url(/wp-content/uploads/2021/04/ingredients.jpg)');
});
}); });
</script>
<style>
#test1{
-webkit-transition: background 0.4s ease-in-out;
-o-transition: background 0.4s ease-in-out;
transition: background 0.4s ease-in-out;
}
</style>
You are correct that the transition does not work on Firefox.
Here is a simple snippet to show the problem:
#test1
{
transition: background 0.4s ease-in-out;
-webkit-transition: background 0.4s ease-in-out;
-o-transition: background 0.4s ease-in-out;
-moz-transition: background 0.4s ease-in-out;
-ms-transition: background 0.4s ease-in-out;
background-image: url(https://picsum.photos/id/1015/200/300);
height: 200px;
width: 200px;
}
#test1:hover {
background-image: url(https://picsum.photos/id/1016/200/300);
}
<div id="test1"></div>
It depends on exactly what you want, but one way round it in this simple case is to not attempt a transition on the main element but to have the background images on before and after pseudo elements and fade them in and out. (They need to not be in the actual element because the opacity changes would affect its other content).
Hover on the image to get it to transition to another one.
#test1
{
position: relative;
height: 200px;
width: 200px;
}
#test1::before, #test1::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transition: opacity 0.4s ease-in-out;
}
#test1::before {
background-image: url(https://picsum.photos/id/1015/200/300);
opacity: 1;
}
#test1::after {
background-image: url(https://picsum.photos/id/1016/200/300);
opacity: 0;
z-index: -1;
}
#test1:hover::before {
opacity: 0;
}
#test1:hover::after {
opacity: 1;
}
<div id="test1"></div>
I am applying this css transformation to an image in a table when the cursor hover over the image..
transform-origin: bottom right;
-webkit-transform: scale(5) ;
I have tried every which way to get the origin outside the image, but it seems there is no way. If the origin is 'right' the image expands to the left obscuring the original image.
I would like to to put the transform image in a fixed location outside the table altogether! Or at least expose the small image.
* {
margin: 0;
padding: 0;
}
img {
width: 100%;
-webkit-transition: all 0.7s ease;
-o-transition: all 0.7s ease;
transition: all 0.7s ease;
}
img:hover {
-webkit-transform: translate3d(25px, 25px, 100px);
transform: translate3d(25px, 25px, 100px);
-webkit-transition: all 0.7s ease;
-o-transition: all 0.7s ease;
transition: all 0.7s ease;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div class="wrapper">
<img src="https://media.sproutsocial.com/uploads/2017/02/10x-featured-social-media-image-size.png" alt="">
</div>
</body>
</html>
Instead of using transform-origin: bottom right; use transform: translate3d(25px, 25px, 100px); property. Hope it'll help
Coming from https://stackoverflow.com/a/9334132/3779853: Let's assume a basic element that gets toggled programmatically. This could mean setting display to none/block or removing/inserting the element altogether.
$('#toggle').click(() => $('#square').toggle());
#square {
width: 50px;
height: 50px;
background: lightblue;
}
.animated {
animation: fade-in 1s;
}
#keyframes fade-in {
from { opacity: 0; }
to { opacity: 1; }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="toggle">toggle</button>
<div id="square" class="animated"></div>
With a simple animation, you can add a transition effect for when the element appears. How do you do the same thing for when the element disappears?
I do not want to add further classes, no :hover, and no more Javascript code. In many JS frameworks, you can show/hide elements easily: .toggle() (JQuery, as above), ng-if (AngularJS), *ngIf (Angular), conditional rendering (React), v-if (VueJS) and so on. With above solution, a simple class="animated" is enough to have it appear with custom animations. So I am looking for a pure CSS solution for fade out animation here, assuming this is a standard problem.
Here is a 100% pure css solution.
#square {
width: 50px;
height: 50px;
background: lightblue;
transition: opacity 1s ease-in-out;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition:opacity 1s ease-in-out;
}
#myBox:checked ~ .animated {
opacity: 0;
}
#myBox ~ .animated {
opacity: 1;
}
<input type="checkbox" id="myBox" style="display:none;"/>
<button id="toggle"><label for="myBox">toggle</label></button>
<div id="square" class="animated"></div>
You can use the opacity property with transition effect.
$('#toggle').click(() => $('#square').toggleClass('animated'));
#square {
width: 50px;
height: 50px;
background: lightblue;
transition: opacity 0.5s;
opacity: 1;
}
#square.animated {
opacity: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="toggle">toggle</button>
<div id="square" class="animated"></div>
i was trying to increase decrease div height with smooth animation but fail to do so due to good command over css animation.
here is my code
<body ng-app="ang_app" ng-controller="ang_control01_main">
<input type="checkbox" ng-model="myCheck">
<div id="myDiv" ng-show="myCheck" class="animate-show animate-hide"></div>
</body>
var app=angular.module('ang_app', ['ngAnimate']);
app.controller('ang_control01_main', function($scope) {
});
CSS
.animate-hide {
-webkit-transition:all linear 1s;
-moz-transition:all linear 1s;
-ms-transition:all linear 1s;
-o-transition:all linear 1s;
transition:all linear 1s;
}
#myDiv {
transition: .5s;
background-color: lightblue;
height: 100px;
}
#myDiv.ng-hide {
transition: .5s;
height: 0;
}
please check this site https://codepen.io/LFeh/pen/ICkwe must watch how they nicely increase decrease div height when we hover and out pointer from div. how to achieve the same smooth effect in my case.
It seems to work fine - are you sure that you have included a script reference to angular-animate.js? Here is a working sample of your expand and collapse transitions:
angular.module('app', ['ngAnimate']);
.animate-hide {
transition: all linear .5s;
}
#myDiv {
background-color: lightblue;
height: 100px;
}
#myDiv.ng-hide {
height: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.4/angular-animate.min.js"></script>
<body ng-app="app">
<input type="checkbox" ng-model="myCheck">
<div id="myDiv" ng-show="myCheck" class="animate-hide"></div>
</body>
<!DOCTYPE html>
<html>
<head>
<style>
div
{
transition:after 3s;
-webkit-transition:after 3s;
}
div:hover:after
{
content:"- positive!";
}
</style>
</head>
<body>
<div>Test</div>
</body>
</html>
I have this sample code above. I'm trying to use 'transition' so that the text: '- positive!' takes 3 seconds to slide/show up. But it isn't working.. How to fix it?
after is not a valid value of transition.
Instead put transition as a property of the :after selector.
HTML
<div>Test</div>
CSS
div:after {
content:" - positive!";
position: relative;
opacity: 0;
top: -20px;
-webkit-transition: all 3s;
transition: all 3s;
}
div:hover:after {
opacity: 1;
top: 0px;
}
Demo
You can also have a different transition on the hover in and hover out state. This allows us to have a delay to show the pseudo-element but no delay to hide it.
CSS
div:after {
content:" - positive!";
position: relative;
opacity: 0;
top: -20px;
-webkit-transition: all 250ms;
transition: all 250ms;
}
div:hover:after {
opacity: 1;
top: 0px;
-webkit-transition: all 3s;
transition: all 3s;
}
Demo
Here is a list of browsers that support transitions on pseudo elements:
http://css-tricks.com/transitions-and-animations-on-css-generated-content/