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.
Related
I have a website that I am developing and I have multiple Divs on the main page. I have a div on the right side of the page labeled right_bar2 and I want it to change every 5-10 seconds. The entire div will just be an image that is a link. Basically I assumed the easiest way to do this would be to have a div with a bunch of hidden div's in it and then maybe some javascript that unhides one div at a time and then hides it again and unhides another. However I am unsure the best way to do it. I have looked at a bunch of example and can't get it to work 100% correctly.
Thanks for any advice ;)
JsFiddle examples would be great!
I tried something like this http://jsfiddle.net/VENLh/4/ but in my rails environment/setup, it breaks multiple things, so I'd like something cleaner and easier.
I cleaned it up a bit in this fiddle, but if you said the original breaks multiple things in your original environment, this might not fix them. What specifically did it break?
What I cleaned up was to avoid the need to keep a manual count of the DIVs for the JS or to worry about their IDs. The code is pretty simple:
$(function() {
var $divs = $('div', '#container'),
total = $divs.length,
counter = 0,
showDiv = function() {
$divs.stop().hide();
$($divs[counter]).show('fast');
counter = (conter + 1) % total;
setTimeout(showDiv, 3000);
};
$divs.hide();
showDiv();
});
I didn't perform one optimization that should probably be done. You probably should cache the results of the jQuery selectors on each DIV. It would be easy to do with a jQuery map statement, but I didn't want to muddy the waters here.
The only problem I can see in this case is if you are going to use heavy image, it may take some time to load. As the image will start getting loaded when you show it first time. So for this I would say you should keep the opacity 0 and load the image at the time of pageload.
And also to remove the delay you are having where one div is getting hidden and other is getting visible can be removed by using opacity. reduce opacity of one from 100 to 0% and for other increase from 0 to 100%.
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 am having trouble applying the morph effect of mootools to more than one div. i want that all div morphs at the same time, but instead just the first one morphs. Please help!Thank you if you are taking your time to look at this!
i have got the code from that page: http://davidwalsh.name/morphing-elements-mootools-css
but i have two divs instead of one, that are exactly the same ( class, id etc are the same)!
cheers Timm
you need Fx.Elements from mootools-more:
http://mootools.net/docs/more/Fx/Fx.Elements
which is better due to the unified timer etc.
the david walsh example is set for multiple elements also so not sure what you are doing wrong. in any case, its much easier to do:
$$("div.foo").morph({ width: 300, opacity: [0,1], background: "#ffffff"});
which will morph all these properties on all divs with a class of foo.
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"
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.