I'm using localScroll to create a content slider. The problem is that I want to give a fade effect to the div that I'm sliding out, to make it fade before it disappears.
Does anyone have any idea how can I make this? I tried something with onBefore and onAfter but I didn't get what I expected.
Thanks!
LE: here is the code that I'm using:
$(document).ready(function() {
var localScroll = $('#slider .slideshow-wrapper')
var localSections = $('#slider .slideshow-wrapper ul.slideshow li');
var local = $('#slider ul.slideshow');
local.css('width', localSections[0].offsetWidth * localSections.length);
var localScrollOptions = {
target: localScroll,
items: localSections,
navigation: 'ul.tabs li a',
hash: 'false',
axis: 'xy',
duration: 500,
easing: 'swing'
//onAfter: fadeAway
};
$('.container').serialScroll(localScrollOptions);
$('ul.tabs').find('a span').click(selectNav);
});
You can't use fadeOut because it sets the div style to display:none and thus the div has a zero height and width making the scrollTo plugin mess up pretty bad. I would suggest using opacity. In the code below I set the minimum opacity to 0.2 because when I set it to zero, it was hard to tell the content was scrolling.
I took the LocalScroll Demo and made these modifications - it seems to work pretty well. I didn't try to match your code because I know the code below works with the demo and your question title says localScroll but your code uses serialScroll. Anyway, I'm guessing the ul.slideshow li in your code should be equivalent to the .sub in the code below.
$.localScroll({
target: '#content', // could be a selector or a jQuery object too.
queue: false,
duration: 500,
hash: false,
easing: 'swing',
onBefore:function( e, anchor, $target ){
// The 'this' is the settings object, can be modified
$('.sub').animate({ opacity: 0.2 }, 250);
},
onAfter:function( anchor, settings ){
// The 'this' contains the scrolled element (#content)
$(anchor).animate({ opacity: 1 }, 250);
}
});
Edit: I posted a demo at this pastebin
See: http://docs.jquery.com/Effects/queue
Related
I am trying to make div disappear and reappear by have the text disappear, the div collapsing, then the opposite with another div, using JQuery animate function but something's not working in the following code:
$(currentTab + " > p").animate({ opacity: 0},{
duration: 500,
complete: function(){
$(currentTab).animate({width: "0", opacity: 0}, {
duration: 500,
complete: function(){
$(clickedTab).animate({width: "70%"}, {duration: 500, complete: function(){
$(clickedTab + " > p").animate({
opacity: 1
}, 500);
}});
}});
}});
where currentTab and clickedTab are my div ids, like "#ct-1", and my html looks like that:
<div id="ct-1" class="content-div">
<p>aaaaaaaaaaaaaaaaaaaaaaaa</p>
</div>
<div id="ct-2" class="content-div">
<p>bbbbbbbbbbbbbbbbbbbbbbbbb</p>
</div>
So the second animate doesn't run at all. I'm guessing this has somehting to do with the DOM, maybe I can't access a parent inside the animate ? maybe it's nothing to do with it...
Thanks in advance !
Robin
Assuming currentTab is ct-1 and clickedTab is ct-2, all of your animations are working in this fiddle:
http://jsfiddle.net/3k0x3c4L/
You won't notice the width shrink unless clickedTab has a background, which I've added in the fiddle.
Currently im trying to set a page so that on click of a button one div .animates up and another .animates down in the place the old div was which has been successful. The problem is they both do this at the same time making the animation a bit messy. What I want to do is have the animation pause for about 2 seconds just after the first div has moved up and then bring down the second div. Here is my code so far:
$(document).ready(function() {
$('.aboutcontainer,.contactcontainer,.homecontainer,.portfoliocontainer,.musiccontainer').hide();
});
$(document).ready(function() {
$(".homecontainer").show();
});
$(document).ready(function() {
$('#about').click(function go() {
$('.homecontainer,.musiccontainer, .portfoliocontainer, .contactcontainer').fadeOut({
queue: false,
duration: 'slow'
});
$('.homecontainer, .musiccontainer, .portfoliocontainer, .contactcontainer').animate({
'margin-Top': "-1000px" //moves left
});
$('.aboutcontainer ').fadeIn({
queue: false,
duration: 'slow'
});
$('.aboutcontainer').animate({
'margin-Top': "115px" //moves left
});
});
});
I have tried inserting a .delay(2000)just before the .fadeIn here:
$('.aboutcontainer ').fadeIn
and another one before the .animate here:
$('.aboutcontainer').animate
.delay does not seem to work at all (im using the lates jQuery version)
The weird thing is I have tried using a setTimeout() function like so:
setTimeout(function() {
$('.aboutcontainer ').fadeIn({
queue: false,
duration: 'slow'
});
$('.aboutcontainer').animate({
'margin-Top': '115px' //moves left
});
}, 2000);
When I do the .fadeIn pauses for the 2 seconds but the .animate does not. Can someone please let me know what im doing wrong here?
At your site .aboutcontainer has margin-top: 115px; at main.css:131.
So animation from margin-top: 115px; to margin-top: 115px; actually does nothing.
You can set, for example, margin-top: -1000px for .aboutcontainer and see the animation in action.
You are missing the time paramater for animation,
Try to add the timing for animation like below.
setTimeout(function() {
$('.aboutcontainer ').fadeIn({
queue: false,
duration: 'slow'
});
$(".aboutcontainer").animate({
marginTop: "115px",
}, 750);//Look at here..
}, 2000 );
here is the jsfiddle, check it http://jsfiddle.net/ganeshgaxy/d6g1empb/
I have an object accordionOptions which mediates the behavior of an accordion object
on my page. It looks like:
var accordionOptions = {
icons: {
header: 'ui-icon-circle-arrows-e',
activeHeader: 'ui-icon-notice'
},
animate: {
easing: 'easeOutBounce',
duration: 1000
}
}
I'm using that object to determine the behavior of my accordion like so:
$('#accordion1').accordion({
icons: accordionOptions.icons,
animate: accordionOptions.animate
});
I have an anchor tag on my page that when clicked I intend for it to have the same animation as the accordion when a new panel is clicked:
$('#btnChange').click(function () {
$('#test').animate({
easing: accordionOptions.animate.easing
});
});
You can see in the fiddle here this doesn't work. I've tried several things, all were non-successes. How can I attach my desired behavior to the test div using my accordionOptions argument?
Using easing for .animate is slightly different than for .accordion -- you need to pass the duration and easing separately from what should be animated. You should set a height or whatever property it should animate.
$('#test').animate({ height: 100 }, accordionOptions.animate.duration, accordionOptions.animate.easing);
Or shorter syntax similar to how you were originally doing it:
$('#test').animate({ height: 100 }, accordionOptions.animate);
Updated fiddle: http://jsfiddle.net/C6Eax/1/
I'm trying to apply a CSS transition to an element, but at some point before it completes, remove the transition entirely and start another one.
This question answers how to stop a transition in its tracks, but I modified the jsFiddle there to illustrate the issue:
http://jsfiddle.net/zXVLd/
var $div = $('div');
$div.click(function(){
$div.css({
left: 0,
transition: 'none'
});
$div.transit({
top: 600,
},5000);
});
function complete(){
$div.css('backgroundColor', 'blue');
}
$div.transit({left: 600}, 5000, 'linear', complete);
What I want to happen is for the box to reset its position and move down when clicked, and for the completed handler on the first transition to not fire.
What does happen is the box resets its position when clicked, but doesn't move down until the first transition completes (even though the motion from the first transition is no longer happening). The completed handler still fires on the first transition as well.
I've updated your fiddle with the clearQueue method: http://jsfiddle.net/zXVLd/1/
var $div = $('div');
$div.click(function(){
$div.clearQueue().css('left', $div.css('left')).transit({
top: 600,
},5000);
});
function complete(){
$div.css('backgroundColor', 'blue');
}
$div.transit({left: 600}, 5000, 'linear', complete);
That does the trick. See http://api.jquery.com/clearQueue/ for more information on the clearQueue method.
To do this kind of animations, you can try to use GSAP's TweenLite. It's incredible what you can achieve with it. http://www.greensock.com/jump-start-js/ If you include this on your page and add the following code:
div.bind('click', function(e) {
// note that you can animate two directions, from and to
TweenLite.from(div /*element*/, 0.2 /*easing in seconds*/, {
// the css, but for positioning elements you can also use x and y.
x: 600,
easing: linear,
onStart: function() {
Stuff you want to do before the animation
},
onComplete: function() {
Stuff you want to do after animationg
}
});
});
The plugin which you use is using queue. So, it is just enough to call $div.dequeue(); I.e.
var $div = $('div');
$div.click(function(){
$div.dequeue();
$div.css({
left: 0,
top: 0,
transition: 'none'
});
$div.transit({
top: 600,
},5000);
});
function complete(){
$div.css('backgroundColor', 'blue');
}
$div.transit({left: 600}, 5000, 'linear', complete);
fiddle -> http://jsfiddle.net/krasimir/zXVLd/2/
Im new to learning JQuery. Im doing a sample from JQuery Novice to Ninja and Im getting an error when I move my mouse over then next item. The #navigation_blob dissapears it could be a css problem for all I know but run the code tell me what you think I need to do. Im using the easing plugin
$(document).ready(function () {
$('<div id="navigation_blob"></div>').css({
width: $('#navigation li:first a').width() + 10,
height: $('#navigation li:first a').height() + 10
}).appendTo('#navigation');
$('#navigation a').hover(function () {
$('#navigation_blob').animate(
{ width: $(this).width() + 10, left: $(this).position().left },
{ duration: 'slow', easing: 'easeOutElastic', queue: false }
)
}, function () {
$('#navigation_blob')
.stop(true)
.animate(
{width: 'hide'},
{duration: 'slow', easing: 'easeOutCirc', queue: false}
)
.animate({
left: $('#navigation li:first a').position().left }, 'fast'
);
});
});
<style type="text/css">
#navigation li
{
display:inline-block
}
#navigation_blob
{
background-color:Blue; position:absolute; float:left
}
</style>
<ul id="navigation"><li>Home</li><li>About Us</li><li>Buy!</li><li>Gift Ideas</li></ul>
I think your problem is the width: 'hide' in the first .animate() of the second .hover() function:
//...
}, function () {
$('#navigation_blob')
.stop(true)
.animate(
{width: 'hide'},
//...
I think your blob will, essentially, have display: none; once that animation completes so further manipulations of its width or position will have no visible effect. If you say {width: 0} it should work okay: http://jsfiddle.net/ambiguous/YaVzd/
You can also try adding an explicit .show() before the hover-in animation but that produces some odd effects: http://jsfiddle.net/ambiguous/uH9yJ/1/
It looks like the version of jQuery is the culprit here. In this fiddle everything looks fine (using jQuery 1.4.2). However, if you change the version to 1.4.4 (the latest version), things start acting weird. Additionally, I downloaded the code from this book and it looks like the version of jQuery that this sample is using 1.4.
This makes sense if the author's update log is correct. According to the plugin's website, the last update was 12/11/07, which may mean development has stopped, but at the very least it probably means the plugin is out of date.
Hope that helps.