I have some elements which width changes to 0 with JS on scrolling and when transition width to 0 is beginning, elements firstly become very big, but then do as need. In Chrome all works perfectly.
Here is an example of this https://jsfiddle.net/dx914ut0/
What sholud I do?
UPD: Just need to add units.
Instead of just transition try using the code below. This will make sure it works on every browser.
-webkit-transition: visibility 0s, opacity 2s ease-out;
-moz-transition: visibility 0s, opacity 2s ease-out;
-o-transition: visibility 0s, opacity 2s ease-out;
transition: visibility 0s, opacity 2s ease-out;
try function onscroll in your html:
<div onscroll="topFunction()" id="myBtn" title="Go to top"></div>
except if you want this to happen on click, then you should probably add actionListiner or something.
Related
Is it possible to specify which transition to use in fancyBox 3? There are 3 transitions I'm interested in:
Open slide/gallery
Navigate between slides
Close slide/gallery
By default, fancyBox 3 uses different transitions for different types of content.
<!--This will zoom in-->
<a data-fancybox href="#html-content">Open</a> <!--This will fade in-->
<div id="html-content" style="display: none;">
<p>This content does just fades in.</p>
</div>
Look at this codePen to see it in action, including the navigation transitions. For images we have:
Zoom in
Slide horizontally
Zoom out
For html content we have:
Fade in
Slide horizontally
Fade out
Is it possible to change this default behavior in fancyBox 3? For example to let also images fade in and out? I was not able to find any information on this in the documentation.
As of fancyBox version 3.1.20, this is possible through the options animationEffect and transitionEffect. You can find the documentation here.
Not sure if I'm getting this right... but if you want to fade in & out the images (between each transition) you can trick them by using a bit of CSS, add this to your jquery.fancybox.css:
.fancybox-slide.fancybox-slide--image {
opacity: 0;
-moz-transition: all 0.01s ease;
-o-transition: all 0.01s ease;
-webkit-transition: all 0.01s ease;
transition: all 0.01s ease;}
.fancybox-slide.fancybox-slide--image.fancybox-slide--complete {
opacity: 1!important;
-moz-transition: all 0.25s ease;
-o-transition: all 0.25s ease;
-webkit-transition: all 0.25s ease;
transition: all 0.25s ease;}
And also modify the speed of the jquery.fancybox.js lib to:
// Animation duration in ms
speed : 100
Disclaimer: I'm just a mortal and this is not the neatest solution, but worked for me (:
How to implement animated list to grid transition in HTML, using Twitter Bootstrap? So when you toggle between list and grid it looks like this:
You could use CSS transition like this. You'd need to tweak the animation.
.row div {
-webkit-transition: all 0.6s ease;
-moz-transition: all 0.6s ease;
-o-transition: all 0.6s ease;
transition: all 0.6s ease;
}
http://www.codeply.com/go/7GHR01JOez
div.style.marginLeft="-200px";
On click of a button above statement executes but it just changes the margin instantly, but I want that it moves while changing the margin.
So I need a JavaScript solution for that.
Actually you can probably solve this with CSS. If you have the margins changing already, try applying a CSS transition to the element.
-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;
In this case the "all" is a reference to the property you want to apply the transition to. You could probably use margin-left, but all will cover pretty much all available transition properties.
Here's more info: https://developer.mozilla.org/en-US/docs/Web/CSS/transition
I am trying to make a nice transition when clicking a button.
The button is basically a div which triggers a Jquery function. The button consists of some text and a FontAwesome icon.
I want to use JQuery in a way that when I click on the button, the FA icon rapidly changes in size and back, so people get some kind of animated confirmation of clicking the button. I created a class with a transition which increases the font-size at least:
#keepbtn.clicked {
font-size:3em;
opacity:0.8;
-webkit-transition: all 0.1s ease 0s;
-moz-transition: all 0.1s ease 0s;
-ms-transition: all 0.1s ease 0s;
-o-transition: all 0.1s ease 0s;
transition: all 0.1s ease 0s;
}
And I tried toggling between classes using a delay:
$("#keepbtn").toggleClass("clicked").delay(250).toggleClass("clicked");
But this does not work; it does not change anything.
However, this works (but does not change it back to original size of course:
$("#keepbtn").toggleClass("clicked");
Any ideas? I'm rather new to transitions and JQuery so I might be adopting the wrong approach altogether.
Thanks in advance.
In order for delay() to work on non-animated elements, you have to "queue" operators :
$("#keepbtn")
.toggleClass("clicked")
.delay(250)
.queue(function(nxt) {
$(this).toggleClass("clicked");
nxt();
});
Basically I have a single page site that scrolls when the user clicks on the navigation menu.
<div id="mainnav">
<ul id="nav">
<li class="fadertwo"><a id="tst" onclick="CngClass(this);" href="index.html#abouttwo">About</a></li>
<li class="faderthree"><a id="sec" onclick="CngClass(this);" href="index.html#second">Curriculum vitae</a></li>
<li class="faderfour"><a id="third" onclick="CngClass(this);" href="index.html#thirdtwo">contact</a></li>
</ul>
</div> <!-- end mainnav -->
Using jquery (which im totally new to) it adds a class when the user clicks on each link.
Basically it transitions the background position.
.active {
background-position:bottom;
text-decoration:none;
-webkit-transition: .3s linear;
-moz-transition: .3s linear;
-o-transition: .3s linear;
transition: .3s linear;
}
Background is a 10px img repeating along the top.
#tst {background-image:url(../_images/whiteb.png);
background-repeat:repeat-x;
-webkit-transition: .3s linear;
-moz-transition: .3s linear;
-o-transition: .3s linear;
transition: .3s linear;
}
#sec {background-image:url(../_images/blackb.png);
background-repeat:repeat-x;
-webkit-transition: .3s linear;
-moz-transition: .3s linear;
-o-transition: .3s linear;
transition: .3s linear;
}
#third {background-image:url(../_images/greenb.png);
background-repeat:repeat-x;
-webkit-transition: .3s linear;
-moz-transition: .3s linear;
-o-transition: .3s linear;
transition: .3s linear;}
Now the jquery magic -
<script type="text/javascript">
var Lst;
function CngClass(obj){
if (typeof(obj)=='string') obj=document.getElementById(obj);
if (Lst) Lst.className='';
obj.className='active';
Lst=obj;
}
</script>
It works great changing the background position in a really smooth way when the user clicks it, but of course doesn't change based on the user scrolling the page naturally.
Now, I could set the body overflow to :hidden; and 'fix' that, but it's a bit hacky and will limit the content area and overall site layout.
What I'd like to do is use jquery to add the class .active to the a tag based on scroll position so it changes anyway.
I've looked around for hours and tried different things but my (lackof) knowledge of jquery limits me somewhat it implementing anything I find effectively.
Can anyone offer any solution?
Have a look at scrollspy
http://twitter.github.com/bootstrap/javascript.html#scrollspy
or
https://github.com/sxalexander/jquery-scrollspy
Or have a look at
http://imakewebthings.com/jquery-waypoints/