I've got this code:
$(function(){
$('#gallery').click(function(){
$('.overlay').fadeIn(500);
$('#infographic').delay(800).fadeIn(200);
});
});
Now when I click $('#gallery') again, I want the above to reverse.
Anyone??
This should work:
$(function(){
$('#gallery').click(function(){
$('.overlay').toggle(500);
$('#infographic').delay(800).toggle(200);
});
});
http://api.jquery.com/toggle/
Since your fade-in has the infographic starting 300ms after the overlay finishes, I've reversed the steps and modified the delay so that the overlay will fade out 300ms after the infographic does. The following code will exactly reverse your fade-in.
$(function(){
$('#gallery').click(function(){
// Check the current state - are things visible? If yes, fade out
if ($('#inforgraphic').is(':visible')) {
$('#infographic').fadeOut(200);
$('.overlay').delay(500).fadeOut(500);
// If not visible, fade in
} else {
$('.overlay').fadeIn(500);
$('#infographic').delay(800).fadeIn(200);
}
});
});
Related
I have two divs I want to transition across the screen to make it look like an infinite loop. I have worked with adjusting setTimeouts and setting an event listener (transitionend), but I keep getting a huge gap between the divs. Here is a link to the js fiddle using the event listener. Below is code I used without using the event listener.
Javascript
var boxWrap = $('#one');
var boxWrap2 = $('#two');
boxWrap.addClass('start')
boxWrap2.addClass('start')
setInterval(function () {
boxWrap.removeClass('start')
boxWrap[0].offsetTop
boxWrap.addClass('start')
}, 35000)
setInterval(function () {
boxWrap2.removeClass('start')
boxWrap2[0].offsetTop
boxWrap2.addClass('start')
}, 35000)
CSS
.boxWrapper.start {
transition: right linear 35s;
right: calc(-144vmin - 80vmin - 200vmin);
}
.boxWrapper.boxWrapper2.start {
transform: translateX(-224vmin);
transition: right linear 35s;
right: calc(-144vmin - 80vmin - 200vmin);
}
Tell me if there is anything you need.
How would you sequentially activate CSS3 transforms?
I'm trying the following:
<script type="text/javascript">
var sample = $('<div style="text-align:center;">hello</div>');
sample.appendTo($('body'));
sample.css('transform', 'scale(1.0)');
sample.css('transition', 'all 1s ease-in-out');
sample.css('transform', 'scale(2.0)');
</script>
It ignores the transition completely and just sets the scale.
From Mozilla's docs:
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_transitions
Care should also be taken when using a transition immediately after
adding the element to the DOM using .appendChild() or removing its
display: none; property. This is seen as if the initial state had
never occured and the element was always in its final state. The easy
way to overcome this limitation is to apply a window.setTimeout() of a
handful of milliseconds before changing the CSS property you intend to
transition to.
So the solution ends up being:
<script type="text/javascript">
var sample = $('<div style="text-align:center;">hello</div>');
sample.appendTo($('body'));
sample.css('transform', 'scale(1.0)');
sample.css('-moz-transition', 'all 1s ease-in-out');
setTimeout(function () {
sample.css('transform', 'scale(2.0)');
}, 10);
</script>
Hey my question is how they made that, that the bar over and under the text fade in when the site is displayed ?
http://joy-interactive.com/
-Kai
They probably set a jQuery event to automatically trigger the animation upon $( document ).ready
$(function() {
$("#progress-bar").toggleClass("top-bar-animation");
});
And then in their CSS, they have something like:
.top-bar-animation {
//animation code here
}
I have the following scripts which work fairly nicely:
$("#spanLoading").ajaxStart(function () {
$('#spanLoading').empty().append("<img src='/img/loading.gif' />");
});
$("#spanLoading").ajaxComplete(function () {
$('#spanLoading').empty();
});
Is it possible to change these a little, so instead of loading an image on ajaxStart, the mouse cursor changes instead to css cursor wait, and then changes back to normal when ajaxComplete.
Yes, you can do this by changing the cursor property of the body element:
$("#spanLoading").ajaxStart(function () {
$('body').css('cursor', 'wait');
});
$("#spanLoading").ajaxComplete(function () {
$('body').css('cursor', 'auto');
});
Yes:
$('html').css('cursor', 'wait');
On ajaxComplete you change it back.
Neither seem to work right for me. Starting with query:
<script>
$(function() {
$("#button1").hover(function() {
$("#button1").animate({opacity: 0.5}, 500);
});
});
</script>
This causes the opacity to shift down, but it doesnt resume on mouseleave. Jquerys hover page says to put a in and out action like so:
.hover( handlerIn(eventObject), handlerOut(eventObject) )
so when i do this it just gives me both animations on mouse in and again on mouseout:
<script>
$(function() {
$("#button1").hover(function() {
$("#button1").animate({opacity: 0.5}, 500),
$("#button1").animate({opacity: 1}, 500);
});
});
</script>
So i gave up on that and tried mouseenter/mouseleave combo:
<script>
$(function() {
$("#button1").mouseenter(function() {
$("#button1").animate({opacity: 0.5}, 500);
});
("#button1").mouseleave(function() {
$("#button1").animate({opacity: 1}, 500);
});
});
</script>
It just sticks on the mouseenter animation. So i tried the css method:
<style>
a:hover {
opacity: 0.5;
}
</style>
<div>
<a id="button1" ><img src="Assets/button.png"></a>
</div>
Doesnt do jack. :shrug:
Try passing in the hover handlers in separate functions, like this:
$(function() {
$("#button1").hover(function() {
$("#button1").animate({
opacity: 0.5
}, 500);
}, function() {
$("#button1").animate({
opacity: 1
}, 500)
});
});
I don't use jQuery, but the CSS example you've provided works perfectly for me. I just copied code from the example and swapped the image with one of my own.
Consider checking whether your browser (it's version) fully supports opacity. I'm using Firefox 12.0
nm, i give up. The only way ive gotten mouse events to work is by putting it directly within the element (onmouseup: onmousedown: etc...). I did get a:hover to work finally but theres no way to animate it without cutting out ie9 and below, so thats out of the question. At least theres a solution, no thanks to jquery.