jQuery toggleClass - can't animate or give it a transition - javascript

I'm having a small issue with my code. I have an element that when the page scrolls it will appear. However, I cannot get it to "appear" in a smoother way. I have tried CSS transitions and attempted fadeIn but neither work. It always just "jumps" in, I cannot get it to ease in.
Here is the code:
$(window).on("scroll", function () {
$('.navbar').toggleClass('visible', $(document).scrollTop() > 40);
});
So it appears just fine, but I can't figure out how to animate adding the class name.
This is the CSS btw:
.navbar {
visibility: hidden;
}
.navbar.visible {
visibility: visible;
}

visibility can't be animated with CSS transitions.
But you can do :
.navbar {
opacity: 0;
transition: opacity .5s ease; // Feel free to use prefixes.
}
.navbar.visible {
opacity: 1;
}
CSS transition / animations is surely the best way to animate something in 2014. You should avoid fadeToggle() and others jQuery animation methods.

instead of using toggleClass, use fadeToggle. it will do everything for u as far as CSS..
give it a try, just fadeToggle();

Here is the example of your code with correct css transition. You cannot animate visibility, but you can play with position and opacity.
http://jsfiddle.net/xZ6fm/
.navbar {
position: fixed;
top: -100px;
left: 0; right: 0;
padding: 12px;
opacity: 0;
background: #ccc;
}
.navbar.visible {
top: 0;
opacity: 1;
-webkit-transition: top 0.3s linear, opacity 0.7s linear;
-moz-transition: top 0.3s linear, opacity 0.7s linear;
transition: top 0.3s linear, opacity 0.7s linear;
}

As indicated in the other answer, fadeToggle() will get the work done for you. And frankly, it's probably the easiest way to accomplish such an effect.
CSS transitions require the transition property. Place this block of code in each of your CSS declarations:
transition: visibility .25s linear;
-webkit-transition: visibility .25s linear;
-moz-transition: visibility .25s linear;
-o-transition: visibility .25s linear;
If you have difficulties with visibility, try using opacity instead.

Related

CSS animation : move a div with the new position relative to the previous

for better performance, I want replace:
$('#foo').animate({ left: '+=42px' }, 500);
by a transition (or animation) CSS3.
But how can we do to implement "+=" on left property in CSS?
How move a div with the new left position relative to the previous?
thx.
In vanilla-js you can't use +=, but you can get the old value instead:
document.getElementById('foo').onclick = function() {
this.style.left = parseFloat(getComputedStyle(this).left) + 42 + 'px';
};
#foo {
position: relative;
left: 0;
transition: 2s left;
}
<div id="foo">Click me multiple times</div>
You can use the transition for smooth animation. you just put transition settings in the CSS of an element like this,
#foo {
-webkit-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
transition: all 0.5s ease-out
}
Then do your incrementation of left with script like this.
$('#foo').css('left', '+=42px');
You can refer to this page.

How do I change the opacity of an image?

<script type="text/javascript">
$(document).ready(function(){
$('#logo').mouseenter(function() {
$('#logo').fadeTo("fast",0.3);
});
$('#logo').mouseleave(function() {
$('#logo').fadeTo("fast",1)
});
});
</script>
I made this to change the opacity of an image while hovering over it with the cursor, but this doesn't happen. :(
You don't need jQuery for that, you can use CSS:
Example HTML - you need it to have the ID logo.
<img id="logo" src="http://upload.wikimedia.org/wikipedia/commons/thumb/8/84/Example.svg/200px-Example.svg.png" />
CSS
#logo {
opacity: 1;
filter:alpha(opacity=100);
transition: opacity 0.2s linear 0s;
-webkit-transition: opacity 0.2s linear 0s;
}
#logo:hover {
opacity: 0.3;
filter:alpha(opacity=30);
transition: opacity 0.2s linear 0s;
-webkit-transition: opacity 0.2s linear 0s;
}
http://jsfiddle.net/pFEdL/2/
What does you HTML look like for your image? Is it embedded in other divs?
SO: Jquery mouseenter() vs mouseover()
As gilly3 states in the question above, "Each time your mouse enters or leaves a child element, mouseover is triggered, but not mouseenter".

Make CSS hover element permanent onclick

So I have created a little box with some CSS animation:
.boxtest
{
width: 50px;
height: 50px;
background-color: green;
opacity: .2;
transition: opacity .8s, width .8s ease-out;
-moz-transition: opacity .8s, width .8s ease-out;
-webkit-transition: opacity .8s, width .8s ease-out;
-o-transition: opacity .8s, width.8s ease-out;
}
.boxtest:hover {
opacity: 1;
width: 70%;
}
What I'd like is for the CSS hover class to remain permanent after the user has hovered their mouse over the element.
I guess you'd need to use Javascript, but I'm no expert so can't figure out the right command. Any help would be awesome!
http://jsfiddle.net/r75gC/
Here you go!
Basically I used jQuery to add a class to the div. You can choose one of the two below.
//onClick
$(".boxtest").on("click", function () {
$(".boxtest").addClass('permahover');
});
//onHover
$(".boxtest").on("mouseenter", function () {
$(".boxtest").addClass('permahover');
});
I changed the CSS to:
.boxtest:hover,
.permahover {
opacity: 1;
width: 70%;
}
http://jsfiddle.net/rFRc5/2/
If you haven't a lot of experience with javascript I would recommend using JQuery. Use this to include the JQuery libraries in your website:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
this will allow you to simply do (in your html file):
<script>
$(".boxtest").mouseenter(function() { $(".boxtest").addClass("boxtestHover"); });
</script>
also for the above change .boxtest:hover to boxtesthover (or whatever you want)
jQuery is a bit overkill for this.
Instead of hover, use another class name, then just add this to the element
onmouseover="this.className='newClassName'"

Binding to a specific CSS transition

Hovering the mouse over an element flips it. I would like a JavaScript function to run when the transition started when the user mouses-off the element, completes.
i.e. I would like some JavaScript to run when the element returns to its natural state (un-flipped, in this case) when the user is no longer hovering over it.
I have tried to bind to the webkitTransitionEnd event, but this fires when the transition for hovering completes as well as when the transition for mouse-off completes. How can I distinguish between these two transitions?
My CSS looks like this:
.back {
position: absolute;
z-index: 800;
-webkit-transition: z-index 0s linear .25s, -webkit-transform .5s ease-in-out;
-moz-transition: z-index 0s linear .25s, -moz-transform .5s ease-in-out;
-webkit-transform: rotateY(-180deg);
-moz-transform: rotateY(-180deg);
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
}
.searchResult:hover .back {
position: absolute;
z-index: 900;
-webkit-transition: z-index 0s linear .25s, -webkit-transform .5s ease-in-out;
-moz-transition: z-index 0s linear .25s, -moz-transform .5s ease-in-out;
-webkit-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
}
My JavaScript looks something like this (unsuitable because fires on completion of both mouse over and mouse-off transitions (i.e. flip and un-flip)):
el.find('.back').bind("webkitTransitionEnd", function (e) { /* do stuff */ });
I think (I have yet to perform more than 2 minutes worth of testing) I have solved this issue.
The solution is to add a conditional in the javascript based upon a known CSS property of the event target element. In my case I know the z-index is different in the flipped and non-flipped states, and using this in my javascript appears to solve the issue.
The conditional looks like this:
if(e.originalEvent.propertyName === '-webkit-transform' &&
$(e.originalEvent.target).css('z-index') === '800') {
/*we know we are at the end of the correct transition*/
}
My test browser is very modern however (at the time of writing): Chrome 22.0.1186.0 canary.
The event listener actually fires multiple times, once for each property. You can access the property name with event.propertyName. Putting it all together...
element.addEventListener("webkitTransitionEnd", function(e){
if(e.propertyName == "width") {
doSomething();
}
}, false);
or in jQuery
$(element).on("webkitTransitionEnd", function(e){
if(e.originalEvent.propertyName == "width") {
doSomething();
}
});

css3 image fadein

I'm trying to have images fade in with css3 once they're loaded. The problem is the way my methods are currently chained it fades it in and out for a split second twice. instead of just being blank and fading in.
my solution was to try and split out the animation code into a seperate class that i apply AFTER i initially set the opacity to zero (i do this in JS so people without js enabled can still see the images).
It's still not working though
I assume its because in this code its setting the opacity to zero and immediately adding an animation transition class which somehow catches the opacity .css() method while its changing still (dont know how this is possible,... shouldnt it complete opacity before moving on to add class?)
// nice thumbnail loading
$('.thumb').css('opacity','0').addClass('thumb-animated').on('load', function(){
$(this).css('opacity','1');
});
.resources .thumb-animated {
-webkit-transition: opacity .2s;
-moz-transition: opacity .2s;
-ms-transition: opacity .2s;
-o-transition: opacity .2s;
transition: opacity .2s;
}
Well...
Why do you set opacity to 1 in jQuery?
If you want to use CSS3 and not simply fadeIn(200) why don't you add "opacity: 1" to css class thumb-animated?
EDIT:
Note that load will not be triggered if the image is already in cache.
Also, !important has to be added to rewrite the rule modified via javascript.
There you go: http://jsfiddle.net/enTCe/5/
This seems to work perfectly outside JSfiddle, on JSfiddle looks like it waits for all the images to be loaded.
What about using just css animations? No JS code is needed.
#-webkit-keyframes opacityChange {
0% { opacity: 0; }
100% { opacity: 1; }
}
#-moz-keyframes opacityChange {
0% { opacity: 0; }
100% { opacity: 1; }
}
#-ms-keyframes opacityChange {
0% { opacity: 0; }
100% { opacity: 1; }
}
.thumb {
width: 200px;
height: 200px;
opacity: 1;
-webkit-animation: opacityChange 5s;
-moz-animation: opacityChange 5s;
-ms-animation: opacityChange 5s;
}
You can wait adding the class to the image is loaded
$('.thumb').css('opacity','0').on('load', function(){
$(this).addClass('thumb-animated').css('opacity','1');
});
Try something like this:
$('#thumb').hide();
myImg = $('<img>').attr('src', 'thumb.png').load(function(){
$('#thumb').html(myImg).fadeIn(200);
});

Categories

Resources