I have a really strange problem: I am using jQuery v11 on the latest Chrome on localhost. While I manage to use jQuery.animate() on my website with any elements and features (including opacity), I have one element that I just can't.
I tried to trigger the animation within and outside the $(document).ready() function and they both resulted in the same thing. I tried with fadeTo, fadeIn/fadeOut, animate opacity, all of them the same thing. The animation starts but after a certain percentage it just doesn't continue and jumps right to the end. I also tried it with e.g. padding and it works perfectly.
I am using the callback too but removing or adding it did not affect performance on either cases. Also, I have browsed through dozens or even more questions already, so I feel I did my research.
Thank you for your help!
JavaScript:
$("#nb_copy").stop().animate({ opacity: 0 }, 300, function()
{
$(this).css("background-position", "-16px").stop().animate({ opacity: 1 }, 300);
});
HTML:
<div id='notes_buttons'>
<a id='nb_copy' data-info=''>C</a>
</div>
CSS:
div#notes_buttons
{
width: 18px;
position: absolute;
top: 180px;
right: -24px;
opacity: 0;
filter: alpha(opacity=0);
}
div#notes_buttons a
{
cursor: pointer;
display: block;
width: 18px;
height: 18px;
margin-bottom: 1px;
background: red url("/db/sprite.png") no-repeat;
background-position: 0px 0px;
}
Note: I would like to use this animation in the following situation: I am animating the opacity (see, here it works...) of the parent div, then when the nb_copy button is pressed, it fades out, changes the bg position and fades back.
If I use really long animations (3000) and add a delay, the first animation interrupts after about 40%, then after the 3000 ms are over, it counts the delay and then the new animation. This way I have no problem with the animation. Also, if I do not use the callback, it is working. But the two interrupt each other somehow...
if I only use the .css in the callback, it applies instantly (the background position) but the animation runs smoothly.
I already spent about 1.5 hours on such a small thing... Well, if I reproduce the code above in JSfiddle, it is working: https://jsfiddle.net/g6z4xx16/. I am also using Zeroclipboard with the same button, may it be the problem?
In case I get it out of the Zeroclipboard nest, and put it into a simple click trigger, the same result.
Why to make simple work complicated, just use fadeToggle() instead.
Simply change your code to this :
$("#nb_copy").fadeToggle(function()
{
$(this).css("background-position", "-16px").fadeToggle();
});
Using fadeToggle() is better because animate() is used to make custom animations.
In your code place your <style> tag before the <script> tag.
Related
I'm making a webpage just for a bit of amusement. I want the background image to endlessly scroll to the left when the page is first loaded. The image is set to repeat-x in CSS and is seamless when laid end-to-end. Is this code I wrote aiming in the right direction?
I'm hoping to keep the JS vanilla just for simplicity but if this is better handled by JQuery, CSS or another library I'll be all ears.
I'll be very grateful for the help!
I've already tried some vanilla JavaScript code in a simple HTML document. My efforts so far haven't made the image move at all.
document.addEventListener("DOMContentLoaded", function() {
var y = 0;
while (true) {
y -= 1;
document.getElementById("bgImg").left = y;
}
})
#bgImg {
background-image: url("img1.jpg");
background-repeat: repeat-x;
width: 100%;
height: 660px;
display: inline;
}
<div id="bgImg">
</div>
This simply freezes my browser and doesn't scroll at all. Likely thanks to the "while(true)".
This is best accomplished with a CSS animation instead of JavaScript. CSS keyframed animations are designed to loop smooth transitions between pre-set property states with minimal memory overhead (and no synchronous while loops :P).
The only added bit of information you need to include is the width of your image. If you use this value as the x-coordinate of background-position in the to state of the animation, as soon as the background travels that many pixels, it will jump back to the from position. This jump will be invisible to the viewer, provided you've set the width correctly.
#bg {
background: url('https://www.gravatar.com/avatar/e47523b278f15afd925a473e2ac0b966?s=120&d=identicon&r=PG&f=1');
background-repeat: repeat-x;
width: 240px;
height: 120px;
animation: bgScrollLeft 5s linear infinite;
}
#keyframes bgScrollLeft {
from {
background-position: 0 0;
}
to {
background-position: -120px 0;
}
}
<div id="bg"></div>
I just implemented this on my own site after seeing your question. cool idea!
function animateBg(px=0){
requestAnimationFrame(()=>{
document.body.style.backgroundPosition = `${px}px 0px`;
animateBg(px+0.5);
});
}
animateBg();
It assumes you have a bg image set in CSS. Change the 0.5 to change the speed.
You are moving the element left, but in fact you should move your background position. Next to that with a while(1) loop it will run infinitly. So 2 task, create an animation frame to not run infinite. And change the background-position property.
var left = 0;
// You might want to add a time delta
function animate() {
requestAnimationFrame( animate );
document.getElementById("bgImg").style.backgroundPosition = '0 ' +left-- + 'px';
}
animate();
Note the code probably wont work, but gives you an idea of an solution.
Look into requestAnimationFrame to know what it does.
edit
Look at IronFlare solution, which is more beautiful with css.
I'm beginner and trying to display details of a card/tile from the sliding bottom of the page over click action. I already found one of the template with my requirements and trying to customize. I found few code samples on how can I do sliding effect from the bottom. I was able to findout solution but it works with hover action where as I am trying to do is as below.
Scenario:
As shown in the mockup screenshot >> Cards will be displayed in the home screen >> users clicks on one of the Card >> background should be transparent 50% and movie details should get displayed in sliding button panel >> PLAY NOW should be active
Like the left menu loading in the given template below - playdo template
one of the similar example I found is this but as I mentioned this is hover feature - Sliding bottom panel through HTML, CSS and JS
An other from the top sliding - http://hoveralls.design-way.ro/
Template in the screenshot that i am using is - https://github.com/tomclaus/playdo
Hi and welcome to the front-end world.
What you need to do is to create two different css classes that contain the things you want to change (in this case the top and the transparency). One for when your card/tile is "minimized" and one for when is "maximized".
.minimized{
background-color: rgba(255,255,255, 0.5);
top: 90%;
}
.maximized{
background-color: rgba(255,255,255, 1);
top: 75%;
}
and then apply a click event to your card/title using jQuery or Javascript and swap those classes to give the proper behavior.
$("#card").click(function(){
if($(this).hasClass('minimized')){
$(this).removeClass('minimized');
$(this).addClass('maximized');
}
else{
$(this).removeClass('maximized');
$(this).addClass('minimized');
}
});
Make sure that the CSS for your card/tile includes this:
-webkit-transition: all ease 1s;
That line will give a smooth transition when you swap the minimized and maximized classes.
Please check this jsfiddle to see the code in action.
ps. Since I'm using the "-webkit-" prefix for the transition this example only will work with webkit browsers (safari and chrome)
Ok I finally understood what you want to do with the mockup.
Well the idea is the same, and I'm sure it can be implemented in many other ways but I hope this one helps you to understand what is going on.
Pretty much you need two states (classes) for the actions you want to achieve.
A Minimized and Maximized for the div that holds the movie details.
#details{
z-index: 4;
position: absolute;
-webkit-transition: all ease 1s;
background-color: #2980b9;
color: white;
padding: 30px;
width: 100%;
height: 300px;
}
.minimized{
top: 100%;
}
.maximized{
top: 40%;
}
And other two for the "gray courtain" that sits on top of the cards when the details are show.
#courtain{
position:absolute;
background-color: rgba(100,100,100, 0.5);
width: 100%;
height: 100%;
}
.active{
z-index: 2;
}
.deactive{
z-index: -1;
}
All these must be controlled or toggled using Javascript with a click event for the Card.
function hideAndShow(){
var details = $('#details');
var courtain = $('#courtain');
if(details.hasClass('minimized')){
courtain.removeClass('deactive');
courtain.addClass('active');
details.removeClass('minimized');
details.addClass('maximized');
}
else{
courtain.removeClass('active');
courtain.addClass('deactive');
details.removeClass('maximized');
details.addClass('minimized');
}
}
It is important to check the "z-index" values on the states to place them correctly above the other, the one with the highest z-index value is the one that remains on top.
I've updated the JSFiddle, check it out and hopefully all this makes sence.
Currently I'm testing my webpage in different browsers for compatibility, however, I'm having an issue with my jQuery animate() in Chrome (using SRWare Iron) and IE.
I'm using the following code:
jQuery
$('.element').animate({top:"50px"}, 1400);
HTML
<h1 class="element">testing text slide</h1>
CSS
body {
overflow: hidden;
}
h1 {
margin: 0;
}
.element {
position: absolute;
bottom: -1000px;
left: 50px;
font: bold 72px Arial, sans-serif;
}
The issue I'm having, is that in Firefox (Aurora), element slides from the bottom of the screen (-1000px) up to the top anchor of 50px.
In Chrome and IE, what seems to be happening is that element is sliding from 0px on the top, down to the 50px from the top, so it's very short. If I remove the jQuery animate for element, it's positioned at -1000px (I think, it's off the screen so I assume that's where it is).
Does anyone have any ideas? The other elements I'm animating with it work properly in FF/IE/Chrome.
You should be consistently manipulating only one of top or bottom. Right now your CSS sets bottom and then your animation changes top. As the two are obviously not independent, you will be much more likely to get consistency if you set and manipulate only one of them. When you haven't set a value for top, then the javascript animation is probably getting an inconsistent starting value for top that the animation will start from. It's probably coming back as auto in some browsers and some numeric value in other browsers. You can bypass that whole inconsistency if you don't rely on a value that you haven't set.
Since your CSS sets bottom, I would suggest that you animate bottom also, not top.
I've been trying out a few lightboxes for my website using MooTools 1.4, and I found this one that works and looks really nice (with easy implementation):
http://andrewplummer.com/code/quickbox/
On the demo website, the lightbox works perfectly, clicking the image brings up the overlay and image, and clicking the overlay removes them.
On my website, when you click an image that's marked appropriately, the lightbox pops up and everything works properly, however, when you exit the lightbox by clicking the overlay or pressing q/x/esc, the overlay hides and everything looks great. The only problem with this is that for some reason, this is being embedded into the body of my code:
<div id="qbOverlay" style="display: block; width: 100%; height: 100%; opacity: 0; "></div>
The problem that this causes is that it isn't ever removed after the lightbox is closed, so the entire page is blanked in
#qbOverlay {
display: block;
position: absolute;
z-index: 100;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: #000;
cursor: pointer;
}
This is a problem because this makes the entire top of the page this overlay, and it's never removed after the lightbox is closed. When it's like this, I can't click any links or use any input boxes in the area that it's covering.
I have a feeling that the thing causing this problem is this:
close: function(){
this.quickBox.setStyle("display", "none");
this.quickBox.setStyle("cursor", "auto");
this.overlay.fade("out");
this.active = false;
}
I've tried using MooTools with compatibility mode and having every extra turned on, but with no luck.
This is an actual bug in mootools 1.4 https://github.com/mootools/mootools-core/issues/2074
Its about to be fixed this week in 1.4.1 (hopefully) but you can take the updated Fx.tween element shortcut protiotypes code for the fade here:
https://github.com/cpojer/mootools-core/commit/11b4257f12a51454bd513ab1ac32cd5239d66098
Alternatively, use a simple tween on opacity instead of .fade(), it allegedly works. You can also do a destroy on the overlay, which to me is the best fix
I'm relatively new to Web development and wouldn't even know where to start in coding a JavaScript that fades a grayscale thumbnail image into a color thumbnail image on mouseover, and vice versa on mouseoff (<--or whatever this is called).
I've looked all over and can't find a script that does this. Is this possible? Could I use jQuery to do this? Other thoughts?
I think all you could do is load two thumbnails into a container at once, with the black and white laying over top of the colour. Then, you could use jquery to fade the opacity of the to thumbnail to 0.0. Here is a working example (it just uses a click to change it once, but I'll leave the mouseover / mouseout to you - you may want to speed up the animation):
some html:
<div class="container">
<img src="blackandwhite.jpg" class="bw" />
<img src="colour.jpg" class="colour" />
</div>
some css:
.container { position: relative; }
.container img { position: absolute; }
.bw { z-index: 101; }
.colour { z-index: 100; }
some jquery:
$(function() {
$(".bw").click(function() {
$(this).animate({ opacity: 0.0 }, 800);
});
});
The best way to do this would be to actually have two versions of the image. One that's grayscale and one that's color. To keep it strictly within javascript and html, I don't believe there's any other way than with the two image method. Flash, Silverlight, and maybe even HTML 5, can do it easily.
Do you really want to fade, or just to swap?
Typically the swap is done via CSS
<a class="btn"></a>
and the CSS
a.btn {
background: url(../images/button-image.png) no-repeat 0 0;
width: 110px;
height: 16px;
margin: 10px 0 0;
}
a.btn:hover {
background-position: 0 -16px;
}
In this case there's a little performance improvement going on where button-image contains both images vertically stacked, and the css is sliding the background image around, but it's the same idea. It's a performance enhancement because the browser only needs to download 1 image, not 2.