I'm using NivoSlider and I'm not really good on using javascript so I was wondering if how can I change the transition effects on nivo-slider? or can I change it? If it is possible, I would like to use only one transition effects on my images. Please help.
// This is the default setting:
$('#slider').nivoSlider({effect:'random'}) // Each transition effect will be random
// You can choose from the following effects:
sliceDown
sliceDownLeft
sliceUp
sliceUpLeft
sliceUpDown
sliceUpDownLeft
fold
fade
random
slideInRight
slideInLeft
boxRandom
boxRain
boxRainReverse
boxRainGrow
boxRainGrowReverse
There are a number of "effects" the Nivo slider supports for transitions - have you seen the usage page yet? You pass an object literal to the nivoSlider call with the parameters you want to use, effect being one of them you can specify. A list of how all the parameters you can set are shown and immediately following that is a list of the available effects. You'll have to be more specific about what specific effect you want if you want a more specific answer.
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider({effect:"fade"});
});
</script>
Use other effects as per your need in place of "fade"
Related
Am using animate.css library to apply animated effect on my website. But the problem is effect is applied as soon as page is loaded. And when I scroll to the element effect is already applied.
How can I set effect to be applied only when the element appear while scrolling?
You can use Waypoints – A javascript library that allows you to execute a function when you scroll to an element.
The basic Waypoint function in jQuery looks like this:
$("#element-to-animate").waypoint(function() {
// animation code
}
}, { offset: '100%'});
The 'offset' value determines at what point the animation is triggered.
Here is the guide to setting up and using waypoints.
You need to add wow.js and apply it. This will work when you scroll down to bottom.
To use it, add wow.js in head and add the wow class in the animated element.
<div class="FadeIn wow">
------
</div>
Get it Here. and read full documentation.
Hi I am struggling with a jquery problem what i need is, sliding lines inside of borders of an image. There are four lines and I want them to slide inside the border when the page is loaded. The first line should slide down to up; the second one left-to-right; the third one top-to-down and the fourth from right to left.
I hope that my question is clear.
(the mentioned lines are red)
You don't need JS to do this. Here is a pure CSS way of performing this animation onload, by using keyframes. Unless you want to support older browsers, this method should work.
I'll show the first two, you can do the other two
function slideLine1(){ $('#line1').animate({width: '100%'}, 1000, slideLine2); }
function slideLine2(){ $('#line2').animate({width: '100%'}, 1000, slideLine3); }
This will work. However, you can do this with 1 function, calling itself, and an i variable. That will be up to you.
There are other methods to do, this is a very basic example. A tip: Look into jQuery chaining.
Here is a demo which uses only css.
It basically uses #keyframes to solve the problem.
I want to animate between "default" states/positions for a div. For example:
Div absolutely positioned with a class, to be on the left of the screen. Class is removed via JS (or replaced) and position is now relative. The default relative position is actually on the opposite side of the screen. I want to animate this.
Something like a dock, various divs as icons in display-inline, centered horizontally on the dock. If I "delete" one of the icons, the rest will shift a bit to recenter. I want to animate them shifting to fill the gap.
Transition: all does not work (I assume because there was no predefined values for the position) so is this even possible? Are there JS solutions to this?
It's possible exactly the way you described it. Here's a live example of how it's done.
http://jsfiddle.net/nDr4y/3/
You can also remove the transition from css and use jquery to animate the element with pure JS. The syntax looks like this:
// in the object are the css properties you want to animate,
// the second argument is how long you want it to take in ms
$('.el').animate({ left: 100 }, 1000);
You just need to figure out the destination coordinates and set it using jQuery, or whatever framework you use. Other than that, it's totally possible.
http://jsfiddle.net/Kd72u/
Here is my situation. I'm trying to do several animations on a single element at once; however, with the UI thread 'feature' and JQuery's animation queue it's becoming a hassle.
I'm designing a re-usable control library for a site and one of the things I wanted to do was to have a multi-class attribute system to initiate different animations upon ready().
For instance:
<div class="fadein loadingbar"></div>
with the CSS for an image background for .loadingbar, and then JQuery to animate the loading-bar's background indefinitely:
$(".loadingbar").each(function(){
$(this).css({backgroundPosition:"0px 0px"});
$(this).animate({backgroundPosition:"(-65px 0px)"}, (($(this).height() / 35) * 2000) + 600, "linear", function(){_n3_animLoadBars(this)});
});
as well as the fadeIn() animation for the .fadein class:
$(".fadein").each(function(){
$(this).css({opacity:0,visibility:"visible"})
.animate({opacity:1}, {duration:1000});
});
However; the only way to get them to animate asynchronously is to do {queue:false} for the .animate() function, which works fine until I want to delay the fade-in animation:
$(".fadein").each(function(){
$(this).css({opacity:0,visibility:"visible"})
.delay(800)
.animate({opacity:1}, {duration:1000,queue:false});
});
which completely skips the .delay() call since it's not queued (therefore not placing the animation cue right after the delay on the fx stack).
The only fix is to wrap the div with another div:
<div class="fadein"><div class="loadingbar"></div></div>
and to take the {queue:false} out, of course.
While this works, the javascript was supposedly going to be advanced enough so the markup didn't have to be that messy (usually a simple div wrap like that is fine with me, but I'm designing this for my own personal amusement and I would like to keep it down to a single div if at all possible).
Any quick fix with JQuery that I am missing, or is there a way to do this through writing a plugin?
Any insight would be helpful!
Found the solution - it was easier than I thought.
Instead of specifying {queue:false} on the fade-ins, I specified it on the background animations, leaving the fade-ins queued.
I'm new to jquery, and I have a bit of a problem.
What I need to do is have one div as my main slideshow. That seems straightforward enough.
However, I would like another slideshow div to change next, ( containing a bit of text ).
So the change path would be:
div 1 change, div 2 change,
div 1 change ,div 2 change,
And so on.
Where would I begin if I wanted to do this task before the end of the day ( I guess I'm spending the weekend reading about javascript and jquery )?
Using the jQuery Cycle Plugin you can do something like this:
var slide1 = $('.slideshow1');
var slide2 = $('.slideshow2');
slide1.cycle({
after:function(){
slide1.cycle('pause');
slide2.cycle('resume');
}
});
slide2.cycle({
after:function(){
slide2.cycle('pause');
slide1.cycle('resume');
}
}).cycle('pause');
Will make sure they always stay in sync even if you pause one of them with a hover or some other way.
You might want to check out the jQuery Cycle plugin (options here) and try setting it up with differing delays, but the same speed. This way the animations will begin at different times and although they are not stricly synchronous, they appear to be so because of the offsets.