jquery transit opacity animation conflict? - javascript

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/

Related

Background-image transition not woking in Firefox (-moz-)

I dont get the fade of the background picture to work in Firefox but any other Browser. Help is appreciated!
Just click on the image.
$(document).ready(function(){
$(".click_me").click(function(){
$('.click_me').css('background-image', 'url(https://placekitten.com/500/500)');
});
});
.click_me {
height:500px;
width:500px;
opacity: 1.0;
background-image: url(http://placekitten.com/g/500/500);
-webkit-transition: background-image 700ms linear;
-moz-transition: background-image 700ms linear;
-o-transition: background-image 700ms linear;
-ms-transition: background-image 700ms linear;
transition: background-image 700ms linear;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="click_me"></div>
Since you are using jQuery already why don't use its animate function instead of CSS transitions, this will do the trick for you very easily.
$(document).ready(function() {
$(".click_me").one('click', function() {
$(this).animate({
opacity: 0
}, 'fast', function() {
$(this)
.css({
'background-image': 'url(https://placekitten.com/500/500)'
})
.animate({
opacity: 1
});
});
});
});
.click_me {
height: 500px;
width: 500px;
opacity: 1.0;
background-image: url(http://placekitten.com/g/500/500);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="click_me"></div>

Bootstrap navbar opacitiy using scrolling-nav js

Im using scrolling-nav-js Scrolling nav to animate padding and fix my navbar to the top of my page and i want to give the navbar a subtle opacity animation. How can i add the transition to change the opacity property?
I have the following code in the JS and the CSS files:
//jQuery to collapse the navbar on scroll
$(window).scroll(function() {
if ($(".navbar").offset().top > 50) {
$(".navbar-fixed-top").addClass("top-nav-collapse");
} else {
$(".navbar-fixed-top").removeClass("top-nav-collapse");
}
});
//jQuery for page scrolling feature - requires jQuery Easing plugin
$(function() {
$('a.page-scroll').bind('click', function(event) {
var $anchor = $(this);
$('html, body').stop().animate({
scrollTop: $($anchor.attr('href')).offset().top
}, 1500, 'easeInOutExpo');
event.preventDefault();
});
});
#media(min-width:767px) {
.navbar {
padding: 20px 0;
-webkit-transition: background .5s ease-in-out,padding .5s ease-in-out;
-moz-transition: background .5s ease-in-out,padding .5s ease-in-out;
transition: background .5s ease-in-out,padding .5s ease-in-out;
}
.top-nav-collapse {
padding: 0;
}
}
Nevermind :) adding this is perfect.
transition: background .5s ease-in-out,padding .5s ease-in-out, opacity .5s ease-in-out,opacity .5s ease-in-out;
and
.top-nav-collapse {
padding: 0;
opacity: 0.6;

Enable hover event after certain time [duplicate]

This question already has answers here:
How to add delay to jquery mouseover? [duplicate]
(5 answers)
Closed 7 years ago.
I would like to disable hover event on an anchor tag via jQuery for a certain interval.
example: I've got some CSS styles for a hover effect on anchor (< a href="">) element. When I hover the element I want it to wait certain time (500ms or so) and then to start rendering the hover effect.
Something like this maybe?
$("#navigation").hover(function () {
$("li.has-submenu").off('hover');
setTimeout(function () {
$("li.has-submenu").on('hover');
}, 1000);
});
I checked recently, and it's 2015, this means that you can use CSS3 for this.
The following will start animating background color of all links after 500ms.
No jQuery or any JavaScript needed.
a {
-webkit-transition: all 500ms ease-in;
-moz-transition: all 500ms ease-in;
-ms-transition: all 500ms ease-in;
-o-transition: all 500ms ease-in;
transition: all 500ms ease-in;
}
a:hover {
background-color: #c00;
transition-delay: 500ms;
}
Hover me
If, however you absolutely need to do that with JavaScript, you can use setTimeout in to apply a hovered class to the element:
jQuery(function($) {
$("a").hover(function() {
var el = $(this);
var timeout = setTimeout(function() {
el.addClass("hover");
}, 500);
el.data("timeout", timeout);
}, function() {
clearTimeout($(this).removeClass("hover").data("timeout"));
});
});
a {
-webkit-transition: all 500ms ease-in;
-moz-transition: all 500ms ease-in;
-ms-transition: all 500ms ease-in;
-o-transition: all 500ms ease-in;
transition: all 500ms ease-in;
}
a.hover {
background-color: #c00;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Hover me
I guess you want something like this:
<div id='a' style="border:2px solid black" >
<h3>Hove On me</h3>
For 2000 milliseconds. You will get an alert.
</br>
</div>
$(document).ready(function(){
var delay=2000, setTimeoutConst;
$('#a').hover(function(){
setTimeoutConst = setTimeout(function(){
/* Do Some Stuff*/
alert('Thank You!');
}, delay);
},function(){
clearTimeout(setTimeoutConst );
})
})
DEMO: http://jsfiddle.net/faj81qa0/

Animation inside Block in hidden state

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");
});

Highlight Border Color Using Jquery Animate?

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/

Categories

Resources