I want to highlight the borders of a textfield using animate function, when click on Add Animation Link.
Like this:
Js Fiddle Here: http://jsfiddle.net/N9um8/20/
HTML :
<div>
<p>
<input type="text" name="search" id="search" placeholder="Search for people...." class="field_style">
</p>
<p> Add Animation </p>
</div>
<p class="styling"> I want it like this when click on Add Animation :</p>
<div>
<p>
<input type="text" name="test_search" id="test_search" placeholder="Search for people...." class="test_field_style">
</p>
</div>
CSS:
.field_style { width:400px; }
.styling { color:red; }
.test_field_style {
border-color: #6EA2DE;
box-shadow: 0 0 10px #6EA2DE;
width:400px;
}
Jquery:
$(".add_animation").click(function (){
$("#search").focus().animate({ "background-color": "#B6DADA" }, 800, "linear");
});
backgroundColor is not an animatable property with jQuery animate by default. In general, it cannot animate colors. You will have a much better time using simple CSS transitions although they are not as widely supported (IE9- will not).
.field_style {
width:400px;
transition: box-shadow .8s linear;
outline: 0;
}
.field_style:focus {
box-shadow: 0 0 10px #6EA2DE;
border-color: #6EA2DE;
}
http://jsfiddle.net/N9um8/31/
.8s is a bit long for the animation by the way.
You have a couple of different options. The best performance-wise would definitely be CSS:
The JS:
$(".add_animation").click(function (){
$("#search").focus(function() {
$(this).css({backgroundColor: '#B6DADA'});
}).blur(function() {
$(this).css({backgroundColor: '#fff'});
}).focus();
});
The CSS:
#search {
-webkit-transition: .8s background linear;
-moz-transition: .8s background linear;
-ms-transition: .8s background linear;
-o-transition: .8s background linear;
transition: .8s background linear;
}
The fiddle
Another way is using a jQuery plugin or something (my favorite is called jquery color) to animate your colors.
$(".add_animation").click(function (){
$("#search").focus(function() {
$(this).animate({backgroundColor: '#B6DADA'}, 800, 'linear');
}).blur(function() {
$(this).animate({backgroundColor: '#fff'}, 800, 'linear');
}).focus();
});
The fiddle
Try with this plugin : http://www.bitstorm.org/jquery/color-animation/ and append :
<script src="http://www.bitstorm.org/jquery/color-animation/jquery.animate-colors-min.js"></script>
An example here:
http://jsfiddle.net/N9um8/20/
Related
Question
Is it possible to animate the change to and from an input's disabled state using jQuery (or some other Javascript library)
Details
Have different CSS styles for a regular input and one that is disabled. When changing between the different states, would like the user to see the previous state fade into the new state.
Is it possible to animate this change just by changing 'disabled' state of the input? Perhaps by doing something like this:
// CSS
input{
background-color: white;
}
input:disabled{
background-color: grey;
}
// Javascript
$.find('input').animate({'disabled': false});
Or will I need to change the disabled state of the input, and then animate the input styling change separately?
// Javascript
$.find('input').prop('disabled', false);
$.find('input').animate({'background-color': 'white'});
You can achieve this with CSS transitions and the :disabled pseudo-class
$("#handler").change(function(){
$("#myInput").prop("disabled", $(this).is(":checked"));
});
input[type="text"] {
background: #fff;
-webkit-transition: background 1s ease;
-moz-transition: background 1s ease;
-o-transition: background 1s ease;
-ms-transition: background 1s ease;
transition: background 1s ease;
}
input:disabled {
background: #666666;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="handler" />
<br />
<input type="text" id="myInput" />
Does animation work if the block content is in state "none"?
For example, if I want to use Load with JQuery, and I want animation to start after the page load, will this work?
.container {
display : none;
}
.container .animate {
transform : translate(0,-100px);
transition : 1s transform ;
}
.show {
display : block ;
}
in jquery
$(function() {
$(".container").addClass("show");
});
If there is another way please help me.
Looks like display:none elements can be animated...
Here's a test : the text is hidden, translates to the right, then shows up : it works.
$("p").addClass("shift");
setTimeout( function(){
$("p").css("display","block");
}, 1000)
p{
display:none;
border:green solid 1px;
width:150px;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
p.shift{
transform : translate(300px,0);
-webkit-transform: translate(300px,0);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>some text</p>
Is this what you want?
Just try to change the attr
$(function() {
$(".container").attr("display","block !important");
});
I have an element that I want to move and the, half way through the move, start fading out. By the time the move is complete, it has 0 opacity. I am using the transit library to make these animations smoother. Opacity on its own works. Move on its own works, but the 2 do not play nice together. where am i going wrong?
$(function() {
$("#go").click(
function(){
$("#block").transition({y:'90px', queue:false}, 2000);
$("#block").transition({ x: '90px',queue:false }, 2000 );
$("#block").transition({ opacity: 0 ,queue:false , delay:1000 }, 1000 );
});
});
fiddle: http://jsfiddle.net/bastiat/5844Q/
I would consider using CSS transitions and just triggering them with jquery: JS Fiddle
CSS
div {
background-color:yellow;
width:100px;
border:1px solid blue;
position:absolute;
x:50px;
-webkit-transition: all .8s ease;
-moz-transition: all .8s ease;
-ms-transition: all .8s ease;
-o-transition: all .8s ease;
transition: all .8s ease;
margin-left: 0px;
}
JQuery
$("#go").click(function () {
$("#block").css('margin-left', '90px').css('opacity', '0');
});
JQuery (if you want the opacity to fade after it moves over): JS Fiddle
$("#go").click(function () {
$("#block").css('margin-left', '90px')
.delay(800)
.queue(function (next) {
$(this).css('opacity', '0');
next();
});
});
To actually use the transit plugin to solve this problem, you need to add them to the same transition() call.
$(function() {
$("#go").click(
function(){
$("#block").transition({ x: '90px', opacity: 0, queue:false }, 2000 );
//$("#block").transition({ opacity: 0 ,queue:false , delay:1000 }, 1000 );
});
});
Working fiddle: http://jsfiddle.net/qngmwmo2/
Below is my HTML-CSS-Jquery code.
Problem: When I click on the background button, The Colour changes from Orange to Green instantly.
What I want is, when I click on the Background button the background color of the div must change colour slowly.
Please note that I am only permitted to use Jquery. No Other plugins may be used.
Code:
<!DOCTYPE html>
<html>
<head>
<style>
#box
{
position:absolute;
height:200px;
width:200px;
background-color:orange;
padding: 20px;
margin: 200px 200px;
}
</style>
<script src="//code.jquery.com/jquery-1.10.2.min.js"> </script>
<script type="text/javascript">
$(document).ready(function(){
$("#width").click(function(){
$("#box").animate(
{"width": "300px"},
"slow");
});
$("#height").click(function(){
$("#box").animate(
{"height": "300px"},
"slow");
});
$("#background").click(function(){
$("#box").css("background-color","green");
});
});
</script>
</head>
<body>
<button id="width" type="button"> Width </button>
<button id="height" type="button"> Height </button>
<button id="background" type="button"> Background </button>
<div id="box">
<p>Bringing so sociable felicity supplied mr. September suspicion far him two acuteness perfectly. Covered as an examine so regular of. Ye astonished friendship remarkably no. Window admire matter praise you bed whence. </p>
</div>
</body>
</html>
try something like this,FIDDLE
$("#background").click(function(){
$("#box").css({
transition : 'background-color 1s ease-in-out',
"background-color": "green"
});
});
you can do also by css
In CSS
.slowbackground {
background-color: green;
-webkit-transition: background-color 0.4s ease;
-moz-transition: background-color 0.4s ease;
-o-transition: background-color 0.4s ease;
transition: background-color 0.4s ease;
background-color: D3E1FA;
}
in js
$("#background").click(function(){
if( $("#box").hasClass("slowbackground")) {
$("#box").addClass("slowbackground");
}
});
I am looking to create a slide out DIV, like the one here when you press "Contact". Does anybody know of anything similar to this?
Making use jQuery's slideToggle() method could help you do this.
Example
HTML:
<div id="contact">
Contact me!
</div>
Contact
CSS:
#contact
{
display: none;
background: grey;
color: #FFF;
padding: 10px;
}
JavaScript:
$(function()
{
$("a#toggle").click(function()
{
$("#contact").slideToggle();
return false;
});
});
If you don't want to use jQuery and you can stick to modern browsers you can try:
Demo: http://jsfiddle.net/ThinkingStiff/EVyE8/
HTML:
<div id="slide">click me</div>
CSS:
#slide {
height: 50px;
transition: height 500ms ease;
-moz-transition: height 500ms ease;
-ms-transition: height 500ms ease;
-o-transition: height 500ms ease;
-webkit-transition: height 500ms ease;
}
Script:
document.getElementById( 'slide' ).addEventListener( 'click', function() {
this.style.height == '50px' || this.style.height == ''
? this.style.height = '150px'
: this.style.height = '50px';
}, false );
yet another sample, but without jquery, and with a class add/remove approach :)
Demo: http://jsfiddle.net/1wbh8pqj/
The main idea is that you have two classes, one of them applies to the slider, and the another, says how the slider should show when it is expanded.
.slider {
height: 0px;
overflow: hidden;
transition: height 0.5s ease;
-moz-transition: height 0.5s ease;
-ms-transition: height 0.5s ease;
-o-transition: height 0.5s ease;
-webkit-transition: height 0.5s ease;
}
.slided {
height: 100px;
}
so, you have to set the 'slided' class to the slider when it has to be expanded, and remove it when the slider has to be shrinked, and using the super-mega-uber-awesome css transition, the height will smoothly change :)
var expander = document.getElementById("expander");
expander.addEventListener("click", function () {
var slider = document.getElementsByClassName("slider")[0];
if (slider.classList.contains("slided")) {
slider.classList.remove("slided");
} else {
slider.classList.add("slided");
}
});
ohbtw, the html:
<div class="slider">i am teh slidah!! :D</div>
<div class="content">and i am the content XD</div>
<div id="expander">click me to expand/hide the slidah! :O</div>
Another sample
Sample
http://jsfiddle.net/9cdYR/
HTML
<div id="slide">
Slide content<br />
Slide content<br />
Slide content<br />
</div>
<div id="content">
Content<br />
Content<br />
Content<br />
</div>
<button id="slide_button">Slide it</button>
CSS
#content {
background-color: #c0c0c0;
border: 1px solid blue;
}
#slide {
border: 1px solid red;
background-color: #000;
color: #fff;
overflow: hidden;
}
JS
$('#slide_button').click(function() {
$('#slide').animate({
height: 'toggle'
}, 1500, function() {
});
});
With jQuery, you make the div and add display:none with css. Then, something like:
$('.button').click(function(e){
e.preventDefault();
$('#mydiv').slideToggle();
});
The almighty jQuery comes to a rescue, once again.
If you don't want to use jquery, just set a timer and increase the height.