I'm trying to set border radius for an element with animation like this:
$(element).hover(function(){
$(this).animate({borderRadius : 5});
}, function(){
$(this).animate({borderRadius : 0});
});
when I hover on element, the animation will work Properly. But after hovering out, it won't perform with any animation.
In Firefox the animation isn't working on mouseout. Use CSS instead of javascript here.
Ex: https://codepen.io/patdiola/pen/ZyaYdE
button {
background: blue;
border: 0;
color: white;
padding: 10px 20px;
transition: border-radius ease-in-out 500ms;
}
button:hover {
border-radius: 10px;
}
Another solution is to use jQuery-UI:
$(function() {
$('#target').hover(function(){
$(this).addClass('borderIn', 500);
}, function(){
$(this).removeClass('borderIn', 500);
});
});
#target {
width: 100px;
height: 100px;
background-color: lightblue;
}
.borderIn {
border-radius: 50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div id="target"></div>
I exaggerated your code a little for effect, but it appears to work for me.
$("div").hover(function(){
$(this).animate({borderRadius : 30});
}, function(){
$(this).animate({borderRadius : 0});
});
div{
height: 70px;
border: 3px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div></div>
Related
Series of div's which is inside the container. If button click train should move.
<script>
$('document').ready(function(){
$("button").click(function(){
$("#train").animate({left: "300px"}, 2000);
});
});
</script>
Your #train may need absolute positioning. Consider the following example.
$(function() {
$("button").click(function() {
$("#train").animate({
left: "300px"
}, 2000);
});
});
#train {
width: 100px;
height: 30px;
border: 1px solid #222;
border-radius: 6px;
background: #ccc;
position: absolute;
padding-top: 8px;
text-align: center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button>Go</button>
<div id="train">Train</div>
So far I know you can make it statically fade in like this:
$("#element").fadeIn()
I want to make an image fade in in a sliding sideways sort of way like when a curtain at a show get pulled to the side and the background for the performance is revealed (not stretching, but fade-sliding).
Here is a sample example that I can provide. If you have doubt, leave a comment.
$(document).ready(function() {
$("#hide").click(function() {
$("#panel").hide("slide", {
direction: "left"
}, 1000);
});
$("#show").click(function() {
$("#panel").show("slide", {
direction: "left"
}, 1000);
});
});
#panel {
height: 100px;
padding: 50px;
text-align: center;
background-color: #e5eecc;
border: solid 1px #c3c3c3;
}
#hide {
padding: 20px;
width: 200px;
background: red;
color: white;
}
#show {
padding: 20px;
width: 200px;
background: blue;
color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<div id="hide">Click here to Hide the Pannel</div>
<div id="show">Click here to Show Pannel</div>
<div id="panel">This is your pannel</div>
I'm trying to make a box shadow property only visible during scrolling. I'm using HTML, CSS and JS.
I want the shadow to appear with a small transition when scrolling then disappear when stopped.
So far I have been using this code:
<head>
<title>website</title>
<link href="style.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<div id="mySidenav" class="sidenav" onscroll="scrollShadow()"></div>
css
.sidenav {
height: 100%;
width: 280px;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: skyblue;
overflow-x: hidden;
transition: 0.5s;
padding-top: 10px;
}
js
function scrollShadow() {
document.getElementsByClassName("sidenav").style.boxShadow = "3px 0px 10px black";
}
Would love any help!
Instead of setting the style attribute, which is harder to manage (especially if you have more than one element you want to affect), you could set a class on body and style the elements with CSS.
(function iife() {
var body = document.body;
var timer;
window.addEventListener('scroll', function onScroll() {
clearTimeout(timer);
body.classList.add('scrolling');
timer = setTimeout(function removeClass() {
body.classList.remove('scrolling');
}, 150);
}, false);
})();
*, *:before, *:after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
#container {
width: 100vw;
height: 5000px;
background: lightgrey;
transition: background 5s;
}
.scrolling #container {
background: red;
}
#fix {
position: fixed;
top: 50px;
left: 50px;
height: 120px;
width: 20px;
background: white;
transition: all 300ms ease 0s;
}
.scrolling #fix {
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.35);
transform: translateY(-3px);
}
<div id="container">
<div id="fix"></div>
</div>
u can use jquery scroll method as
<script>
$(function(){
$(window).scroll(function(){
if($(window).scrollTop()>=40){
/*do something */
scrollShadow();
}
});
});
function scrollShadow() {
document.getElementsByClassName("sidenav").style.boxShadow = "3px 0px 10px black";
}
</script>
I would first ensure that you refrain from adding CSS inside JS, it just shouldn't live there. You can achieve what you want by adding a class to the body which is then targeted inside your CSS. Finally, there's no native way of knowing if the user has stopped scrolling. The only way is to define a timeout which will remove the class unless the user scrolls, whereby the original timeout is cancelled and a new timeout is defined. It's also best to make sure that the window is completely loaded else you'll be targeting elements that aren't there yet. This example below should be what you need:
window.addEventListener('load', function(){
var timeout = null;
var body = document.querySelector('body');
var scrollClass = 'scrolled';
window.addEventListener('scroll', function(){
clearTimeout(timeout);
body.classList.add(scrollClass);
timeout = setTimeout(function(){
body.classList.remove(scrollClass);
}, 250);
});
});
body {
height: 2000px;
}
.sidenav {
height: 100%;
width: 280px;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: skyblue;
overflow-x: hidden;
padding-top: 10px;
transition: box-shadow 500ms ease-in-out;
}
.scrolled .sidenav{
box-shadow: 3px 0px 10px #000;
}
<div class="sidenav"></div>
This should achieve what you want.
Tom
Hello I have a design that is similar to this image
the red color is another div I want the window to auto scroll when hover over that little red part of the div so it go down till the whole div is shown so it should look like this
thanks in advance
You can't scroll the window using CSS only.
Use javascript and the scrollIntoView method.
Simple demo
document.querySelector('[data-scrollintoview]').addEventListener('mouseenter', function(e) {
e.target.scrollIntoView(true);
});
.black {
background-color: #000;
margin-bottom: 20px;
height: 150px;
}
.red {
background-color: #f00;
height: 150px;
}
<div class="black"></div>
<div data-scrollintoview class="red"></div>
Something like this:
$(document).ready(function() {
$('.scroll').on('mouseenter', function() {
$("body").animate({
scrollTop: $(this).offset().top
}, 500);
})
})
.red {
background-color: #f00;
}
.green {
background-color: #0f0;
}
.red,
.green {
margin-bottom: 10px;
height: 300px;
position: relative;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="red scroll"></div>
<div class="green scroll"></div>
http://jsfiddle.net/leonwho/98mD2/
HTML
<div id="account-setup-guide">
<div id="account_tour_info">
<ul>
<li class="setup_complete"><strong>1</strong> Sync!</li>
</ul>
</div>
</div>
CSS
#account-setup-guide {
position: relative;
margin: 30px 30px 20px 20px;
padding: 20px;
width: auto;
border: 5px solid orange;
background: orange;
}
jQuery
var animateThis = function() {
console.log('run animateThis');
$('#account-setup-guide').stop().animate({backgroundColor: '#ffffff'}, 500);
$('#account-setup-guide').animate({
background: 'white'
}, 500);
}
animateThis();
Not sure why this isn't working, I've used both examples above of the .animate but it's not working in my current jsfiddle test :(
jQuery doesn't support animation of color, you have to include plugin which support it as jQuery UI or jQuery color:
jQuery color
jsFiddle (thx to kei)