I have put together a little code that I had hoped would allow the html to scroll to the left whenever a user scrolls down and scroll right when the user scrolls up
I've put together an example of my code here JSFIDDLE
$(document).ready(function() {
$(window).bind('mousewheel', function(e) {
e.preventDefault();
if (e.originalEvent.wheelDelta >= 0) {
$('html, body').scrollRight(1);
}
else {
$('html, body').scrollLeft(1);
}
});
});
I need to prevent the user from scrolling vertically and want the vertical scrolls to cause horizontal scrolling instead.
The scrollRight method is not defined by jQuery so you have to use scrollLeft.
When you call scrollLeft without any arguments you get the current scroll position (starting from the left edge). When you call scrollLeft(value) you set the current scroll position to value (ref. https://api.jquery.com/scrollleft/).
Following snippet works.
$(document).ready(function() {
var body = $('body');
$(window).bind('mousewheel', function(e) {
e.preventDefault();
body.scrollLeft(body.scrollLeft() - e.originalEvent.wheelDelta);
});
});
section {
width: 500vw;
height: 100vh;
/*unimportant */
background: rgba(76,76,76,1);
background: -moz-linear-gradient(45deg, rgba(76,76,76,1) 0%, rgba(89,89,89,1) 12%, rgba(102,102,102,1) 25%, rgba(71,71,71,1) 39%, rgba(44,44,44,1) 50%, rgba(0,0,0,1) 51%, rgba(17,17,17,1) 60%, rgba(43,43,43,1) 76%, rgba(28,28,28,1) 91%, rgba(19,19,19,1) 100%);
background: -webkit-gradient(left bottom, right top, color-stop(0%, rgba(76,76,76,1)), color-stop(12%, rgba(89,89,89,1)), color-stop(25%, rgba(102,102,102,1)), color-stop(39%, rgba(71,71,71,1)), color-stop(50%, rgba(44,44,44,1)), color-stop(51%, rgba(0,0,0,1)), color-stop(60%, rgba(17,17,17,1)), color-stop(76%, rgba(43,43,43,1)), color-stop(91%, rgba(28,28,28,1)), color-stop(100%, rgba(19,19,19,1)));
background: -webkit-linear-gradient(45deg, rgba(76,76,76,1) 0%, rgba(89,89,89,1) 12%, rgba(102,102,102,1) 25%, rgba(71,71,71,1) 39%, rgba(44,44,44,1) 50%, rgba(0,0,0,1) 51%, rgba(17,17,17,1) 60%, rgba(43,43,43,1) 76%, rgba(28,28,28,1) 91%, rgba(19,19,19,1) 100%);
background: -o-linear-gradient(45deg, rgba(76,76,76,1) 0%, rgba(89,89,89,1) 12%, rgba(102,102,102,1) 25%, rgba(71,71,71,1) 39%, rgba(44,44,44,1) 50%, rgba(0,0,0,1) 51%, rgba(17,17,17,1) 60%, rgba(43,43,43,1) 76%, rgba(28,28,28,1) 91%, rgba(19,19,19,1) 100%);
background: -ms-linear-gradient(45deg, rgba(76,76,76,1) 0%, rgba(89,89,89,1) 12%, rgba(102,102,102,1) 25%, rgba(71,71,71,1) 39%, rgba(44,44,44,1) 50%, rgba(0,0,0,1) 51%, rgba(17,17,17,1) 60%, rgba(43,43,43,1) 76%, rgba(28,28,28,1) 91%, rgba(19,19,19,1) 100%);
background: linear-gradient(45deg, rgba(76,76,76,1) 0%, rgba(89,89,89,1) 12%, rgba(102,102,102,1) 25%, rgba(71,71,71,1) 39%, rgba(44,44,44,1) 50%, rgba(0,0,0,1) 51%, rgba(17,17,17,1) 60%, rgba(43,43,43,1) 76%, rgba(28,28,28,1) 91%, rgba(19,19,19,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4c4c4c', endColorstr='#131313', GradientType=1 );
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section></section>
First of all, you miss te parenthesis at the end of the preventDefault() call. That's why the vertical scrollbar still works.
Second, there is no such jQuery method as scrollRight(). You should use the scrollLeft() method for both direction.
See your updated fiddle!
Related
So i need to make this calculator have specific themes 3 to be exact. I read some documentation and found a good way to do it with data atributes. I goes as follows. You define all the variables for a specific theme but only activatie them when a certain data atribute is present in the html tag. If you change the data atribute the variables should now be redefined for that theme. Now ik know this works in CSS but it doesnt seam to work for SCSS. maybe i am doing something wrong syntax related.
these are my SCSS variables.
// Typography
$main-Font: 'Spartan',
sans-serif;
// Theme 1
$background: hsl(222, 26%, 31%);
$keypadColor: hsl(223, 31%, 20%);
$ScreenColor: hsl(224, 36%, 15%);
$tertiaryKeyColor: hsl(225, 21%, 49%);
$tertiaryKeyColorShadow: hsl(224, 28%, 35%);
$secondaryKeyColor: hsl(6, 63%, 50%);
$secondaryKeyColorShadow: hsl(6, 70%, 34%);
$basicKeyColor: hsl(30, 25%, 89%);
$basicKeyColorShadow: hsl(28, 16%, 65%);
$text1: hsl(221, 14%, 31%);
$text2: hsl(0, 0, 100%);
$text3: hsl(0, 0, 100%);
html[data-color-mode="theme-2"] {
// Theme 2
$background: hsl(0, 0%, 90%);
$keypadColor: hsl(0, 5%, 81%);
$ScreenColor: hsl(0, 0%, 93%);
$tertiaryKeyColor: hsl(185, 42%, 37%);
$tertiaryKeyColorShadow: hsl(185, 58%, 25%);
$secondaryKeyColor: hsl(25, 98%, 40%);
$secondaryKeyColorShadow: hsl(25, 99%, 27%);
$basicKeyColor: hsl(45, 7%, 89%);
$basicKeyColorShadow: hsl(35, 11%, 61%);
$text1: hsl(60, 10%, 19%);
$text2: hsl(0, 0, 100%);
$text3: hsl(0, 0, 100%);
}
html[data-color-mode="theme-3"]{
// Theme 3
$background: hsl(268, 75%, 9%);
$keypadColor: hsl(268, 71%, 12%);
$ScreenColor: hsl(268, 71%, 12%);
$tertiaryKeyColor: hsl(281, 89%, 26%);
$tertiaryKeyColorShadow: hsl(285, 91%, 52%);
$ScreenColor: hsl(176, 100%, 44%);
$secondaryKeyColorShadow: hsl(177, 92%, 70%);
$basicKeyColor: hsl(268, 47%, 21%);
$basicKeyColorShadow: hsl(290, 70%, 36%);
$text1: hsl(52, 100%, 62%);
$text2: hsl(0, 0, 100%);
$text3: hsl(198, 20%, 13%);
}
this is the HTML
<!DOCTYPE html>
<html lang="en" data-color-mode="theme-1">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- displays site properly based on user's device -->
<title>Frontend Mentor | Calculator app</title>
<!-- stylesheet link -->
<link rel="stylesheet" href="./css/index.css">
<!-- Js link -->
<script src="./js/app.js" defer></script>
</head>
<body>
<div class="calculator-container">
<header class="flex">
<h2>Calc</h2>
<div class="toggle-button-container">
<h3>theme</h3>
<input type="range" max="2" value="0" name="theme-selector" id="theme-selector-button">
</div>
</header>
<div class="display">
</div>
<main class="keypad grid">
<button>7</button>
<button>8</button>
<button>9</button>
<button class="tertiary-color">DEL</button>
<button>4</button>
<button>5</button>
<button>6</button>
<button>+</button>
<button>1</button>
<button>2</button>
<button>3</button>
<button>-</button>
<button>.</button>
<button>0</button>
<button>/</button>
<button>x</button>
<button class="col-span tertiary-color">RESET</button>
<button class="col-span secondary-color">=</button>
</main>
</div>
</body>
</html>
and this function changes the data atribute. Now this part works because i can see the atribute change in the dev tools
```
const themeSelectorBtn = document.getElementById('theme-selector-button');
let keypadBtns = Array.from(document.querySelectorAll('button'));
const display = document.querySelector('.display');
const app = document.querySelector('html')
themeSelectorBtn.addEventListener('input', () => {
let currentValue = themeSelectorBtn.value;
if(currentValue == 0){
app.dataset.colorMode = 'theme-1';
} else if(currentValue == 1) {
app.dataset.colorMode = 'theme-2';
} else {
app.dataset.colorMode = 'theme-3';
}
})
```
and the documentation i am trying to replicate contains this but in CSS instead of SCSS
```
:root {
/* Theme 1 */
/* Backgrounds */
--main-bg-theme: hsl(222, 26%, 31%);
--toggle-bg-theme: hsl(221, 38%, 25%);
--btn-bg-theme: hsl(221, 35%, 19%);
--screen-bg-theme: hsl(224, 36%, 15%);
--top: white;
/* Button */
--btn-second-bg-theme: hsl(225, 21%, 49%);
--btn-second-shadow-theme: hsl(223, 31%, 24%);
--equals-theme: hsl(6, 63%, 50%);
--btn-primary-bg-theme: hsl(30, 25%, 89%);
--btn-primary-shadow-theme: hsl(28, 16%, 65%);
/* Text */
--text1-theme: hsl(221, 14%, 31%);
--text2-theme: hsl(0, 0, 100%);
--equals: white;
--display: hsl(0, 0, 100%);
--equals-shadow: hsl(6, 70%, 34%);
}
html[data-color-mode="theme2"] {
/* Backgrounds */
--main-bg-theme: hsl(0, 2%, 89%);
--toggle-bg-theme: hsl(0, 12%, 82%);
--btn-bg-theme: hsl(0, 12%, 82%);
--screen-bg-theme: hsl(0, 0%, 100%);
--top: black;
/* Button */
--btn-second-bg-theme: hsl(185, 42%, 37%);
--btn-second-shadow-theme: hsl(185, 50%, 25%);
--equals-theme: hsl(6, 63%, 50%);
--btn-primary-bg-theme: hsl(45, 7%, 89%);
--btn-primary-shadow-theme: hsl(35, 11%, 61%);
/* Text */
--text1-theme: hsl(192, 12%, 8%);
--text2-theme: hsl(0, 0, 100%);
--equals: white;
--display: black;
--equals-shadow: hsl(6, 70%, 34%);
}
html[data-color-mode="theme3"] {
/* Backgrounds */
--main-bg-theme: hsl(268, 75%, 9%);
--toggle-bg-theme: hsl(268, 74%, 20%);
--btn-bg-theme: hsl(268, 74%, 20%);
--screen-bg-theme: hsl(268, 74%, 20%);
--top: hsl(54, 63%, 75%);
/* Button */
--btn-second-bg-theme: hsl(281, 89%, 26%);
--btn-second-shadow-theme: hsl(290, 69%, 43%);
--equals-theme: hsl(177, 92%, 70%);
--btn-primary-bg-theme: hsl(281, 71%, 21%);
--btn-primary-shadow-theme: hsl(290, 70%, 36%);
/* Text */
--text1-theme: hsl(54, 63%, 75%);
--text2-theme: hsl(0, 0, 100%);
--equals: black;
--display: hsl(54, 63%, 75%);
--equals-shadow: hsl(189, 69%, 43%);
}
```
So it turns out i made a silly mistake. I put a - in between colorMode in the HTML file. It works fine now.
I have a page with a background that is styled to appear as diagonal lines. I want to make the colour of these lines change with jQuery slowly and fade as they change. Is this possible?
I have started a fiddle with the CSS in it to display the background as static. http://jsfiddle.net/rabelais/LZc7m/
and here is the code
body {
background-image: -webkit-gradient(linear, right bottom, left top, color-stop(0, #fff), color-stop(0.25, #fff), color-stop(0.25, #9CC), color-stop(0.5, #9CC), color-stop(0.5, #fff), color-stop(0.75, #fff), color-stop(0.75, #9CC));
background-image: -webkit-linear-gradient(right bottom, #fff 0%, #fff 25%, #9CC 25%, #9CCb 50%, #fff 50%, #fff 75%, #9CC 75%);
background-image: -moz-linear-gradient(right bottom, #fff 0%, #fff 25%, #9CC 25%, #9CC 50%, #fff 50%, #fff 75%, #9cc 75%);
background-image: -ms-linear-gradient(right bottom, #fff 0%, #fff 25%, #bbb 25%, #bbb 50%, #fff 50%, #fff 75%, #bbb 75%);
background-image: -o-linear-gradient(right bottom, #fff 0%, #fff 25%, #9CC 25%, #9CC 50%, #fff 50%, #fff 75%, #9CC 75%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#9CC',GradientType=0 ); / IE6-8 */
background-image: linear-gradient(right bottom, #fff 0%, #fff 25%, #9CC 25%, #9CC 50%, #fff 50%, #fff 75%, #9CC 75%);
background-size: 5px 5px;
width:100%;
height:100%;
}
You could make the background image a GIF, or preferably PNG if you can afford the extra size, and utilize transparency. Your image would have white and transparent stripes. Then with the background image overlaying on top of a background color, you can animate the background color. The effect will be the color of the lines changing.
Building on rgbflawed answer .. you will need the Color Animation JS
here is a JSfiddle example
$(document).ready(function () {
$('html, body').click(function () {
$('body').stop().animate({ backgroundColor: '#ff0000' }, 1200);
$('body').delay(1200).animate({ backgroundColor: '#ffffff' }, 1200);
});
});
CSS
body {
background-image: url(http://i.stack.imgur.com/V3pEr.png);
background-color: #12877f;
}
An update is here to fade to white
I recommend using css3 transitions instead of just jQuery.
Toggle through the classes with jQuery and set the background gradient in a seperate css file.
Example:
.defaultClass{
-webkit-transition: color 0.3s;
-moz-transition: color 0.3s;
-ms-transition: color 0.3s;
-o-transition: color 0.3s;
transition: color 0.3s;
}
.blue{
background-color: blue;
}
.red{
background-color: red;
}
Added the blue class to the element would make it fade too blue in 0.3 seconds.
Here's the fiddle for it: http://jsfiddle.net/Rudi91/sttdL/
EDIT: The biggest plus with this is that jQuery animations can run slow on mobile phones/tablets whereas css3 animations usually run smooth
I've developed a lightweight jQuery plugin (~3kb) that is using CSS3 transitions to accomplish what you're looking for - ColorRotator.js
You can use it to transition various CSS color properties, such as background color, box-shadow color and text colors. More properties will be supported in the future.
Example Usage:
$('#element').colorRotator({
colors: ['#1abc9c','#16a085','#2ecc71','#27ae60'],
property: 'background'
});
Here are a few live demos
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 9 years ago.
Improve this question
Clicking the response back to the other user in the private message system, a box will appear,
when I click on it so it will not be
HTML
<form action="#" method="post">
<input type="submit" name="svar" value="Svar" id="indholdcklik" class="click svarpm">
</form>
content to show up on the page
<div id="indholdbeksed">
hey
</div>
CSS
#indholdbeksed {
display: none;
margin: 10px 0px;
}
.click {
font-weight: bold;
color: #ffffff;
background: #79bbff;
background: -moz-linear-gradient(top, #79bbff 0%, #4197ee 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#79bbff), color-stop(100%,#4197ee));
background: -webkit-linear-gradient(top, #79bbff 0%,#4197ee 100%);
background: -o-linear-gradient(top, #79bbff 0%,#4197ee 100%);
background: -ms-linear-gradient(top, #79bbff 0%,#4197ee 100%);
background: linear-gradient(to bottom, #79bbff 0%,#4197ee 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#79bbff', endColorstr='#4197ee',GradientType=0 );
}
.click:hover {
background: #4197ee;
background: -moz-linear-gradient(top, #4197ee 0%, #79bbff 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4197ee), color-stop(100%,#79bbff));
background: -webkit-linear-gradient(top, #4197ee 0%,#79bbff 100%);
background: -o-linear-gradient(top, #4197ee 0%,#79bbff 100%);
background: -ms-linear-gradient(top, #4197ee 0%,#79bbff 100%);
background: linear-gradient(to bottom, #4197ee 0%,#79bbff 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4197ee', endColorstr='#79bbff',GradientType=0 );
}
and at the top of the page will be shown here:
jQuery
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
$("#indholdcklik").click(function() {
$("#indholdbeksed").slideDown("slow",function() {
// Animation complete.
});
});
I created the jsfiddle and add document.ready to start your javascript then document is ready and add return false to prevent form submit.
Now all works fine.
Make sure your javascript code is between <script> tags and within
$(document).ready(function() {
// your code here
});
You should prevent the form from submitting. Pass the event to the callback function and stop the submit.
$("#indholdcklik").click(function(ev) {
ev.preventDefault();
// everything else..
How to make a fixed gradient background? I have tried a few CSS and HTML code like this:
.mygradienttop {
background-color: #C5C2C2;
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#651212), to(#C5C2C2), color-stop(.5,#462020));
background: -moz-linear-gradient(top, #651212 0%, #462020 50%, #C5C2C2 100%);
}
But it's not working. I'm using three.js r63.
Is it possible to animate the position of a CSS3-gradient-color using jQuery?
I'd like to animate from this
background: -moz-linear-gradient(top, #FF0000 0%, #FF0000 0%, #FFFFFF 0%,
#FFFFFF 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FF0000), color-stop(0%,#FF0000),
color-stop(0%,#FFFFFF), color-stop(100%,#FFFFFF)); /* webkit */
to this
background: -moz-linear-gradient(top, #FF0000 0%, #FF0000 50%, #FFFFFF 50%,
#FFFFFF 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FF0000),
color-stop(50%,#FF0000), color-stop(50%,#FFFFFF), color-stop(100%,#FFFFFF)); /* webkit */
in xx milliseconds
thank you in advance!
Be creative.. This is an example of how I do gradient transitions without extra plugins..
I use 2 identical divs with different gradients layered one on top of the other. Then I use jquery to animate the opacity of the one on top..
Here is it step by step
create a wrapper with a fixed size lets say "width:200px" and "height:100px" (I use a wrapper so that its easier to adjust the position of the divs inside it)
create 2 divs that are the same size as the wrapper give both different background gradients but use the same content for both so visually the only thing that changes is the background gradient.
add "position:relative;" and adjust the position of the div that will be on top, in this case box2 with "bottom:100px;" (notice its the same value as the height of the wrapper and the divs. This makes the div that will be on top to move up 100px positioning itself right over the lower div, relative to the wrapper... this is not possible without using "position:relative;" on the top div)
animate the opacity of the div with your preferred method i use fadeToggle in this example
HTML-----
Click to change gradient<br>
<div align="center" style="width:200px; height:100px;">
<div style="width:200px; height:100px;" class="box1" id="box1">CONTENT BOTTOM DIV</div>
<div style="width:200px; height:100px; position:relative;" class="box2" id="box2">CONTENT TOP DIV</div>
</div>
GRADIENTS IN CSS-----
.box1 {
background: rgb(237,144,23); /* Old browsers */
background: -moz-linear-gradient(top, rgba(237,144,23,1) 0%, rgba(246,230,180,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(237,144,23,1)), color-stop(100%,rgba(246,230,180,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(237,144,23,1) 0%,rgba(246,230,180,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(237,144,23,1) 0%,rgba(246,230,180,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(237,144,23,1) 0%,rgba(246,230,180,1) 100%); /* IE10+ */
background: linear-gradient(top, rgba(237,144,23,1) 0%,rgba(246,230,180,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ed9017', endColorstr='#f6e6b4',GradientType=0 ); /* IE6-9 */
}
.box2 {
background: rgb(246,230,180); /* Old browsers */
background: -moz-linear-gradient(top, rgba(246,230,180,1) 0%, rgba(237,144,23,1) 100%);/* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(246,230,180,1)), color-stop(100%,rgba(237,144,23,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(246,230,180,1) 0%,rgba(237,144,23,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(246,230,180,1) 0%,rgba(237,144,23,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(246,230,180,1) 0%,rgba(237,144,23,1) 100%); /* IE10+ */
background: linear-gradient(top, rgba(246,230,180,1) 0%,rgba(237,144,23,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6e6b4', endColorstr='#ed9017',GradientType=0 ); /* IE6-9 */
}
jQuery animation----
$(document).ready(function(){
$("a").click(function(){
$("#box2").fadeToggle(100, "linear");
});
});
you can layer a third div so that you dont need to write the same content twice by adding a second wrapper outside the first one and placing the third div after the inside wrapper closes..
to view this go to the following link..
Link to example
You can make the gradient twice as big (meaning incorporate the first gradient in the first 50%, and the second gradient in the last 50%) as it needs to and use this code:
-webkit-background-size: 200%;
-moz-background-size: 200%;
-o-background-size: 200%;
-ms-background-size: 200%;
background-size: 200%;
on the initial item and.
Not all the prefixes will work, but I do it for compatibility if they add it later
background-position:bottom;
On the hover
CSS gradient transitions haven't been implemented in any of the browsers yet, although it's in the spec. So, you can't do this. You'll need to do this with SVG (if you're brave).
This is a code snippet of one of my project where I use gradient transition using jquery.This may help you:
<div id="gr_anim"> Change Gradient </div>
var p1 = t = 0;
var p2 = 100;
function hello() {
p1 = p1 + 5;
p2 = 100 - p1;
if(p1 <= 100 && p2 >= 0) {
$('#gr_anim').css({
'background-image':'-moz-linear-gradient('+ p1 +'% '+ p2 +'% 45deg, #000, #fff)'
});
} else {
clearTimeout(t);
}
t = setTimeout('hello()',1000);}
$( function() {
hello();});
I think you should try it by using jquery ui's switchClass, you need to add JqueryUI and a link to the dependency effects core
http://jqueryui.com/demos/switchClass/
something like this:
<script type="text/javascript">
$(function() {
$("#button").click(function () {
$(".divPropertyStart").switchClass("divPropertyStart", "divProperty", 1000);
$(".divProperty").switchClass("divProperty", "divPropertyStart", 1000);
return false;
});
});
</script>
<style type="text/css">
.divPropertyStart { background: -moz-linear-gradient(top, #FF0000 0%, #FF0000 0%, #FFFFFF 0%, #FFFFFF 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FF0000), color-stop(0%,#FF0000), color-stop(0%,#FFFFFF), color-stop(100%,#FFFFFF)); }
.divProperty { background: -moz-linear-gradient(top, #FF0000 0%, #FF0000 50%, #FFFFFF 50%, #FFFFFF 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FF0000), color-stop(50%,#FF0000), color-stop(50%,#FFFFFF), color-stop(100%,#FFFFFF)); }
</style>
<div class="divPropertyStart"></div>
Toggle Effect
This works for me #localhost
Lauw
what about animating the width of the container to which the gradient applies ?
(example for Chrome with JQuery)
html:
<div id='test'>
</div>
<span id='click_me'>
</span>
css:
#test
{
width:400px; height: 400px; float:left;
background: linear-gradient(90deg, #5e5e5e 0%, #000 100%);
}
js:
$('#click_me').on('click',function ()
{
$('#test').animate({'width':'+=400'},400);
}
);
works a treat
EDIT: I've made a mistake here as regards the original question. I am going to leave the answer here though as I think that by using more elements than just one the position of the fade could be moved about with the animate() function within a container div, creating the effect of the fade position sliding