On my website built with Rails 4, I use jQuery's animate function. However, it doesn't seem to run very smoothly. In my application.js, my code is under $(window).load:
Here is a sample of the animate block:
$('.background').animate({right: '-2000px'}, 1000, function(){
$($('nav a.active').attr('href')).css("display","none");
$('nav a.active').removeClass('active');
$('.photos').css("display","none");
$(e.currentTarget).addClass('active');
hash = $('nav a.active').prop("hash");
target = document.getElementById(hash.slice(1));
$('.background').animate({right: '0px'}, 1000, function(){
$(target).fadeIn(300);
navFix();
});
});
What can I do to make this smoother? You can view the issue live here by clicking on the navigation links on the left.
The problem is that your CSS is fighting your JS (with jQuery). Specifically your transitions are fighting your animation.
In your CSS, you've added a CSS3 transition to the .background class:
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
transition: all 0.3s ease;
So any time you change any of your .background's CSS properties that can be transitioned, it's gonna try to use that transition speed. Unfortunately for you, the CSS property right is a property that can be transitioned. So when you animate your background with a duration of 1000ms, it's fighting your CSS that wants to do it with a duration of 300ms.
So either use the transition or the jQuery animation, but not both simultaneously.
Fix 1. Should fix your problem and give you a duration of 300ms:
$('.background').css({right: '-2000px'}, function(){
$($('nav a.active').attr('href')).css("display","none");
$('nav a.active').removeClass('active');
$('.photos').css("display","none");
$(e.currentTarget).addClass('active');
hash = $('nav a.active').prop("hash");
target = document.getElementById(hash.slice(1));
$('.background').animate({right: '0px'}, 1000, function(){
$(target).fadeIn(300);
navFix();
});
});
Fix 2. Should fix your problem and give you a duration of 1000ms:
/* in your CSS */
.background {
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
transition: all 0.3s ease;
/* overriding the transition property that was applied to all*/
-webkit-transition: right 1s ease;
-moz-transition: right 1s ease;
-o-transition: right 1s ease;
-ms-transition: right 1s ease;
transition: right 1s ease;
}
// in your JS
$('.background').css({right: '-2000px'}, function(){
$($('nav a.active').attr('href')).css("display","none");
$('nav a.active').removeClass('active');
$('.photos').css("display","none");
$(e.currentTarget).addClass('active');
hash = $('nav a.active').prop("hash");
target = document.getElementById(hash.slice(1));
$('.background').animate({right: '0px'}, 1000, function(){
$(target).fadeIn(300);
navFix();
});
});
Related
If I scroll down on my website my navigation bar will go from "background-color: transparent" to black, and if I scroll up again it turns transparent again.
var positionSmall = 0;
$(document).scroll(function () {
positionSmall = $(this).scrollTop();
if (positionSmall > 140) {
$(".navbar").css('background-color', '#222222');
} else {
$(".navbar").css('background-color', '');
}
});
This works, but I now want the background color to fade in when scrolled down, and fade out when scrolled up again.
I've tried the .fadein and .animate functions from jquery, but they didn't seem to work for me. Does anyone have any ideas on how to do this?
No need for jQuery, you can do this with CSS. Just add a transition to your .navbar class, it will animate the transition even if the change is made in jQuery.
Code:
.navbar {
-webkit-transition: background-color 0.5s ease-in-out;
-moz-transition: background-color 0.5s ease-in-out;
-ms-transition: background-color 0.5s ease-in-out;
-o-transition: background-color 0.5s ease-in-out;
transition: background-color 0.5s ease-in-out;
}
Now you just have to modify the time and you should be good to go. Here is it in action.
I have the following in my script.js file:
$(document).ready(function(){
$( '.elementoBarra1').hover(
function(){
$(this).addClass('lineaBarraActive');
},
function(){
$(this).removeClass('lineaBarraActive');
}
);
});
There is a change in color (based on the instructions I'm giving in the stylesheet), but there's no animation (or transition). It just passes binarily to the other color, there's no animation where it passes through all the colors in the middle in a short-lapse of time.
Why is this?
EDIT: Just tried fadeIn() and fadeOut() and they are working properly, they have a smooth animation. Why are addClass() and removeClass() not working properly?
addClass and removeClass api of Jquery doesn't provide any animation. They are just meant for adding or removing class.
If you want to achieve animation, then you must add transition in the class you are adding.
There's no need for jQuery also. Just use :hover pseudo selector to achieve it
.elementoBarra1 {
background-color: black;
width: 100px;
height: 200px;
-webkit-transition: background-color 1s linear;
-moz-transition: background-color 100ms linear;
-o-transition: background-color 1s linear;
-ms-transition: background-color 1s linear;
transition: background-color 1000ms linear;
}
.elementoBarra1:hover {
background-color: red;
-webkit-transition: background-color 1s linear;
-moz-transition: background-color 100ms linear;
-o-transition: background-color 1s linear;
-ms-transition: background-color 1s linear;
transition: background-color 1000ms linear;
}
DEMO
You can try j Query Animate.
$( "selector" ).animate({
width: "70%",
opacity: 0.4,
marginLeft: "0.6in",
fontSize: "3em",
borderWidth: "10px"
}, 1500 );
You can set css style as mentioned above so that you can get smooth animation.
eg program: Fiddle Url
I have a div that when you click on it opens up the the content within, at the top of the bar I have an arrow image that if the content is closed (default position) the arrow is pointing to the right and when the content is open I want the arrow image to rotate to pointing down.
I am using jQueryRotate to rotate the image and I have all the elements working, but what I can't get it to work when toggling, I can only get the image to rotate once when opening the content, I have where I have got to here
$("#ProductHeaderWrap1").click(function () {
$("#ProductDetailsToggle1").stop().slideToggle("slow");
});
$("#ProductHeaderWrap1").click(function () {
$("#ProductHeaderWrap1").find(".arrow").rotate({
animateTo: 90
}, {
duration: 500
});
});
http://jsfiddle.net/cgF4a/ along with some worked on jQuery attempts, I just need the image to rotate to 0 when clicked to close the div.
Thanks for any help,
J.
It's easier to do this with CSS, take a look:
img.open {
-webkit-transform:rotate(90deg);
-moz-transform:rotate(90deg);
transform:rotate(90deg);
-webkit-transition: -webkit-transform 1s linear;
-moz-transition: -moz-transform 1s linear;
-o-transition: -o-transform 1s linear;
transition: transform 1s linear;
}
img {
-webkit-transition: -webkit-transform 1s linear;
-moz-transition: -moz-transform 1s linear;
-o-transition: -o-transform 1s linear;
transition: transform 1s linear;
}
$(document).ready(function () {
$("#ProductHeaderWrap1").click(function () {
$("#ProductDetailsToggle1").stop().slideToggle("slow");
$(this).find("#Image1").toggleClass("open");
});
});
Updated JSFiddle
I have a problem with animating a font when is scrolls past the viewport height. It can animate once but not back again...
This works, it just changes the font size back and forth:
if ($(this).scrollTop() > $( window ).height()) {
$('.nav li a').css({"font-size":"2vw"});
} else {
$('.nav li a').css({"font-size":"1.2vw"});
}
But this does not, it animates once but then starts to lag and jump when it should animate back:
if ($(this).scrollTop() > $( window ).height()) {
$('.nav li a').animate({"font-size":"2vw"});
} else {
$('.nav li a').animate({"font-size":"1.2vw"});
}
Does anyone know why?
Thanks!
Does this need to be animated in jQuery? You can get your effect with CSS3 transitions (unless you're trying to support older browsers):
transition: all 0.3s ease;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
Or font only:
transition: font 0.3s ease;
-webkit-transition: font 0.3s ease;
-moz-transition: font 0.3s ease;
-o-transition: font 0.3s ease;
-ms-transition: font 0.3s ease;
You can then use the .css() method to change font-size and the CSS transition will handle the animation.
Just in case the problem is you calling animate too many times, you may try something like this (untested code, sorry I can't try it now):
var newState=$(this).scrollTop() > $( window ).height();
function updateOnScroll(e) {
var oldState=newState;
newState=$(this).scrollTop() > $( window ).height();
if(oldState!=newState) {
if(newState) {
$('.nav li a').animate({"font-size":"100vw"});
} else {
$('.nav li a').animate({"font-size":"1.2vw"});
}
}
}
Just an idea...
I have tried and failed to get this working. Basically I am trying to get it so that when you hover over one div, it should change the sibling's opacity to 0.5 that has class="receiver".
If you see this jsFiddle, there are 2 divs with class="outerwrapper", and both contain 2 divs of classes hover and receiver. When you hover over the div with class hover, the receiver's opacity should be set to 0.5, but only the one inside the same div (outerwrapper).
Any help would be much appreciated. Thanks in advance.
You don't need to use jQuery, or JavaScript, for this (though you can1), CSS is quite capable in most browsers of achieving the same end-result:
.hover:hover + .receiver {
opacity: 0.5;
}
JS Fiddle demo.
And also, even with 'only' CSS, in modern/compliant browsers, it's possible to use fade transitions (or, strictly speaking, to transition the opacity):
.receiver {
width: 50px;
height: 50px;
background-color: blue;
opacity: 1;
-webkit-transition: opacity 1s linear;
-o-transition: opacity 1s linear;
-ms-transition: opacity 1s linear;
-moz-transition: opacity 1s linear;
transition: opacity 1s linear;
}
.hover:hover + .receiver {
opacity: 0.5;
-webkit-transition: opacity 1s linear;
-o-transition: opacity 1s linear;
-ms-transition: opacity 1s linear;
-moz-transition: opacity 1s linear;
transition: opacity 1s linear;
}
JS Fiddle demo.
I was going to provide a JavaScript/jQuery solution as well, but there are several others already posted, now, and I'd rather not repeat other people's answers in my own (it just feels like plagiarism/copying).
Something like this would do it: http://jsfiddle.net/UzxPJ/3/
$(function(){
$(".hover").hover(
function(){
$(this).siblings(".receiver").css("opacity", 0.5);
},
function(){
$(this).siblings(".receiver").css("opacity", 1);
}
);
});
References
.siblings() - Get the siblings of an element - http://api.jquery.com/siblings/
.hover() - Catch the mouseover/mouseout events - http://api.jquery.com/hover/
$('.hover').hover(function() {
$(this).next('.receiver').css('opacity', 0.5);
}, function() {
$(this).next('.receiver').css('opacity', 1.0);
});
http://jsfiddle.net/2K8B2/
(use .siblings or .nextAll if the .receiver is not necessarily the next element)
This works:
$(document).ready(function() {
$('.hover').hover(function() {
var $parent = $(this).parent('.outerwrapper');
$parent.find('.receiver').css({ opacity : 0.5 });
}, function() {
var $parent = $(this).parent('.outerwrapper');
$parent.find('.receiver').css({ opacity : 1 });
});
});