Need Sequence .css() For multi div - javascript

I have 5 divs #BS1,#BS2,#BS3,#BS4,#BS5 ..
i need to make every one when hover on the container div ( left-section ) i need to hidden each one and delay maybe from 5000 to 2000 and back it visible again !! that`s my code
$("#left-section-5").hover(function () {
$("#BS1").css("display", "none").delay(500).css("display", "block");
$("#BS2").css("display", "none").delay(50).css("display", "block");
});

The .delay() method only delays subsequent animations on the element(s) in question, and the .css() method is not an animation method. Use .hide() and .show() instead, which are (if you provide a duration) animation methods:
$("#BS1").hide(1).delay(2000).show(1);
// etc.
Or if you want a fancier effect try some other effects methods, e.g.:
$("#BS1").fadeOut("slow").delay(2000).fadeIn("slow");
If by "sequence .css()" you mean that you want the elements to be animated one after the other you can do something like this:
var $divs = $('div[id^="BS"]'),
i = 0;
function next() {
if (i < $divs.length)
$divs.eq(i++).animate({"opacity":0}, 300)
.delay(100)
.animate({"opacity":1}, 300, next);
}
next();
Demo: http://jsfiddle.net/r4byV/

Related

Add class and remove class not work in single statement

$("button").click(function(){
$("#p1").addClass("size").slideUp(2000).slideDown(2000).removeClass("size");
/* p1 is a id of element, i want to add size class after that to remove it */
});
You need to give the second statement as a callback function on the slideDown():
$("button").click(function(){
$("#p1").addClass("size").slideUp(2000).slideDown(2000, function () {
$(this).removeClass("size");
});
});
Or still better, you need to use the callback function of the slideUp also!
$("button").click(function() {
$("#p1").addClass("size").slideUp(2000, function () {
// Execute this after 2 seconds of slideUp animation.
$(this).slideDown(2000, function () {
// Execute this after 2 seconds of slideDown animation.
$(this).removeClass("size");
});
});
});
Because they are not supposed to happen in parallel, but in a sequential order, after each has been finished.
Actually they are adding and removing fine, but it is happening instantly. You need to put some delay in it.
$("button").click(function(){
$("#p1").addClass("size").slideUp(2000, function(){$(this).slideDown(2000 ,function(){ $(this).removeClass("size")})});
/* p1 is a id of element, i want to add size class after that to remove it */
});

jQuery - wait untill all elements are faded out

I have the following problem: I want something to happen after two elements have been faded out. They are supposed to fade out at the same time:
$("#publish-left, #publish-right, #print-run").fadeOut(function(){
//do something
});
However this doesn't seem to do what I want. How do I get my script to fade out two elements and then do something?
Edit: I just noticed there is something special about what I want to do. I don't always know if all elements are visible. So sometimes not all elements will be faded out, only some. However since some elements are already faded out, this will cause the function to trigger immediately I believe.
http://jsfiddle.net/k6yg319o/
Try the example, it should work. Just make sure the DOM is ready!
$(function() {
$('#test1, #test2, #test3').fadeOut(function() {
$('#test3').show();
})
});
you can use callback function,
$("#publish-left, #publish-right").fadeOut("slow", function(){
//call back function executes are faded out
//do something
});
Check the docs for fadeOut.
.fadeOut( [duration ] [, complete ] )
First parameter takes a duration, second is a callback function to execute after fadeOut is complete.
$("#publish-left, #publish-right").fadeOut(1000, function() {
document.body.style.backgroundColor = 'blue'
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="publish-left">Left</div>
<div id="publish-left">Right</div>
Fade out both elements, then turn blue.
You could just run the first fade without the callback and run the second one with the callback if they are both fading at the same speed.
Here's a fiddle.
$("#publish-left").fadeOut();
$("#publish-right").fadeOut(function () {
alert("both fades finished since both fade at the same rate.");
});
Or if you want to use separate speeds you could flip a switch when each one is finished and then run the callback when the second one finishes.
Here's a fiddle.
var faded1 = false;
var faded2 = false;
var callback = function(){ alert("both fades finished"); };
$("#publish-left").fadeOut(function(){
faded1 = true;
if(faded1 && faded2) callback();
});
$("#publish-right").fadeOut(function(){
faded2 = true;
if(faded1 && faded2) callback();
});
Edit..
after reading your comment..
Or if one of them may already be hidden, you could just check to see if they're both hidden in your callback function..
Here's another fiddle
var callback = function(){
// If either element is still visible, don't do anything.
if($("#publish-left").is(":visible") || $("#publish-right").is(":visible")) return;
// Otherwise, do something
alert("both are hidden now");
};
// let's hide the first one right away for testing
$("#publish-right").hide();
$("#publish-left").fadeOut(callback);
$("#publish-right").fadeOut(callback);

.delay() a .css() action by multiplying an index number

I am trying to create a script that does the following:
Waits until a point on the page is reached by scrolling (.clients with an offset of 500px
Start fading in img's contained inside the .clients div once this event is triggered
Fade in with a slight delay between each item (so they fade in in sequence)
Due to other parts of my code the fade-in has to be with change of opacity:1 and cannot be .fadeIn()
I'm somewhere there but having a few issues. Here is my code:
var targetOffset = $(".clients").offset().top;
var $w = $(window).scroll(function(){
if ( $w.scrollTop() > targetOffset-500 ) {
$('.home .clients img').each(function(index){
console.log(index);
$(this).delay(500 * index).css('opacity','1');
});
}
});
First problem
The event does fire at the correct scroll-point in the page, but it continues to fire. I would like it to only fire once and then not register again. When 500 above .clients is reached, the event should fire, and never again.
Second problem
My .each() does not seem to work correctly. Everything fades in at once. My method for making a small .delay() between the fade-ins doesn't seem to be working. I tried multiplying the index by 500. So the first index is 0, so it fires immediately. The second index is 1 so it should fire after 500 milliseconds and so on. I'd like to work out why this method isn't working.
Any help appreciated. I'd appreciate trying to make the code above work rather than writing something entirely new, unless that's the only way. I'd appreciate explanation of what I was doing wrong so I can learn, instead of just pure-code answers.
JSFiddle
Sidney has attacked most of the problems except one. The scroll event fires multiple times, so it checks the conditional multiple times and then actually sets the animation multiple times. To keep this from happening, I typically like to add another boolean to check if the process has fired at all. I've simplified the code to make the changes more legible.
var working = false;
$(window).on('scroll', function(){
if($(window).scrollTop() > 1000 && !working){
working = true;
setTimeout(function(){
working = false;
}, 500);
};
});
As Tushar mentioned in the comments below your post, instead of using .delay() you could use a plain setTimeout().
On the jQuery docs for .delay() they mention that using setTimeout is actually better in some use-cases too - this is one of them.
The .delay() method is best for delaying between queued jQuery
effects. Because it is limited—it doesn't, for example, offer a way to
cancel the delay—.delay() is not a replacement for JavaScript's native
setTimeout function, which may be more appropriate for certain use
cases.
Using setTimeout your code would look like this:
var targetOffset = $(".clients").offset().top;
var $w = $(window).scroll(function() {
if ($w.scrollTop() > targetOffset - 500) {
$('.home .clients img').each(function(index) {
setTimeout(function() {
$(this).css('opacity','1');
}, (500 * index));
});
}
});
Also, you can unbind an event using .off()
so in your if ($w.scrollTop() > targetOffset - 500) { ... }
you could add a line that looks like this:
$(window).off('scroll');
Which would unbind the scroll handler from the window object.
You could also use .on() to reattach it again some time later. (with on() you can bind multiple events in one go, allowing you to write the same code for multiple handlers once.)
Please change your jquery code with following it will trigger event one time only and may be as per your reuirements :-
var targetOffset = $(".clients").offset().top;
var $w = $(window).scroll(function () {
if ($w.scrollTop() == 1300) {
console.log('here!');
$('.clients img').each(function (index) {
$(this).delay(5000 * index).css('opacity', '1');
});
}
});
Here i have take scroll hight to 1300 to show your opacity effect you can take it dynamically, if you want it 500 then please change the css as following also.
.scroll {
height:700px;
}

Javascript on scroll event change css then wait and then rechange

I am trying to change the css on scroll event and it is working.
$(window).scroll(function () {
$(".navcont").css("background-color", "pink")
});
But, when I try to give delay and change it back,
$(window).scroll(function () {
$(".navcont").css("background-color", "pink")
.delay( 5000 )
.css("background-color", "white");
});
It always shows pink color, But I want the white color first then delay and then pink color.
Can some one help me with this!
thanks in advance
Try using only setTimeout, without animate:
$(window).scroll(function () {
$(".navcont").css("background-color", "pink");
setTimeout(function() {$(".navcont").css("background-color", "white")}, 8000);
});
Here on jsFiddle.
First thing I think of is using .animate() to get the callback, then using setTimeout to delay the return to CSS:
$(window).scroll(function(){
$('.navcont').animate({backgroundColor:'pink'},1,function(){
var $this = $(this);
setTimeout(function(){
$this.css({backgroundColor:'white'});
},80000);
});
});
The 1 means the animation is 1 millisecond long, which is invisible to the eye but I've had issue with using zero so I just add a value to satisfy the callback.
The delay() function works only on a jQuery effects queue, not on all functions. The effects are such as fadeIn, slideUp, etc. There is a custom effect generator called animate() and you can use that with delay(). However, you cannot animate non-numeric properties like background-color. So here is a trick -
$(window).scroll(function () {
$(".navcont")
.animate({dummyProperty: "dummyValue"},1,"linear",function(){
$(this).css("background-color","pink")
})
.delay( 80000 )
.animate({dummyProperty: "dummyValue"},1,"linear",function(){
$(this).css("background-color","blue")
});
});
The first argument for animate is a css property you wish to animate. Since background-color cannot be animated, we use a dummy property here (you can use anything here, doesn't make any difference).
The second argument is the time of animation. We just use 1 millisecond here because we set the real delay using the delay() function.
The third argument is the easing (doesn't matter in this case).
The fourth argument is a callback function with 'this' pointing to the selected HTML element. So we change it's background-color here.

Fade in/out buttons on mouseover of an image with jQuery. A few bugs to work out

So, I essentially have what I want already, very simple, but there are some bugs. I just want so when you hover over an image, two left/right buttons appear on the image that allow you to click through other images. Then when you leave the image area (excluding the left/right buttons), the buttons fade out again. Here's what I've got:
$(document).ready(function() {
$('#image-slider').mouseenter(function(){
$('.next').fadeIn('50');
$('.prev').fadeIn('50');
}).mouseout(function(){
$('.next').fadeOut('50');
$('.prev').fadeOut('50');
});
});
Bug #1: However, when you mouseover the image the buttons appear, and if you mouse over the buttons, they disappear. Naturally, of course they do, this is because I told them to fade away when I left the image area. First of all, I need them to stay visible even when you hover over them. So I need to somehow include the buttons as part of my image area in my javascript. That's the first problem/
Bug #2: This is a common problem I see in javascript. When you hover over the image, the buttons fade in, hover off, they fade out. Of course, there's a duration to this, and if you keep hovering in/out/in/out/in/out before the duration can finish, then when you let it fly, it will go on and off and on and off. How can I prevent this? So that is you hover out of the image area while the buttons are fading in, it just stops the animation sequence in its tracks so you don't get that continuous fading in/out.
Thanks in advance!
~ Jackson
ETA: the fix
I got it solved! A combination of your fix and #Pumou's.
I made another div just to wrap the two items and expanded it to cover the image, then I set the mouseover to be that div. Problem #1 solved.
I used puormo's .fadeTo() trick to solve problem #2.
Then, I used tweaks from everyone to shorten up the code so it was neat and tidy. Thanks to all!
I've decided on #jfriend00's solution. It's the shortest, great work!
Here's my final javascript:
$(document).ready(function() {
var b = $('.ps_next, .ps_prev');
$('#slider-wrapper').bind('mouseenter mouseleave', function(e) {
var check = ( e.type === 'mouseenter' ) ?
( b.stop(0,1).fadeIn(100) ) :
( b.stop(0,1).fadeOut(100) ) ;
});
});
Problem #2 can be fixed with .stop() which forces any previous animations to just to their conclusion before starting the next one.
$(document).ready(function() {
$('#imageContainer').hover(function() {
$('.ps_next').stop(true, true).fadeIn(400);
$('.ps_prev').stop(true, true).fadeIn(400);
}, function () {
$('.ps_next').stop(true, true).fadeOut(400);
$('.ps_prev').stop(true, true).fadeOut(400);
});
});
It may be better to use the .hover() jQuery function which handles both enter and leave rather than mouseenter() and mouseout().
You can see both an example of .stop() and .hover() on this jQuery doc page doing almost the exact same thing you are.
For problem #1, I think we'd need to see the structure of your HTML to know how best to advise on that as their are several choices depending upon how things are structured. You could also do the fadeOut on a delay that was cancelled if they hovered over the button so there was time to get the mouse to the buttons before they disappeared. Or, you could use .hover() on a container that contained both image and buttons.
You can see it working here: http://jsfiddle.net/jfriend00/Zk6rY/.
Shortened the code (as seen in the above jsFiddle) even more to this:
$(document).ready(function() {
$('#imageContainer').hover(function() {
$('.ps_button').stop(true, true).fadeIn(400);
}, function () {
$('.ps_button').stop(true, true).fadeOut(400);
});
});
$(document).ready(function() {
var $buttons = $('.next, .prev')
$('#image-slider').mouseenter(function(){
$buttons.stop().fadeTo('50','1');
$buttons.mouseenter(function() { $buttons.show(); });
}).mouseout(function(){
$buttons.stop().fadeTo('50','0');
});
});
I have also used stop();. I've also shortened it to use one selector to select both buttons (in this case, it was set to the variable $buttons).
I noticed that if your mouse entered the image div, and then left, and then entered again, the buttons were fading in to 50% opacity because of the stop();. I fixed this by using the fadeTo(); feature: the first one is the duration, which was set to 50 like yours, and the second one is the opacity to fade to (a number between 0 and 1).
I also solved the problem of keeping the buttons there when you hover over them. See this line:
$buttons.mouseenter(function() { $buttons.show(); });
This just uses show();, which gives the element display:block; on mouseover.
Example here: http://jsfiddle.net/purmou/MM4ba/1/
More about stop(); here: http://api.jquery.com/stop
More about fadeTo(); here: http://api.jquery.com/fadeto
EDIT: Updated the code so that it now uses jQuery's hover(); function. Shorter code is always better.
$(document).ready(function() {
var $buttons = $('.next, .prev')
$('#image-slider').hover(function(){
$buttons.stop().fadeTo('50','1');
$buttons.mouseenter(function() { $buttons.show(); });
},
function(){
$buttons.stop().fadeTo('50','0');
});
});
Example: http://jsfiddle.net/purmou/MM4ba/2/
More on hover(); here: http://api.jquery.com/hover
DEMO FIDDLE
var b = $('.btn');
$('#image-slider').bind('mouseenter mouseleave', function(e) {
var check = ( e.type === 'mouseenter' ) ?
( b.stop(false, true).fadeIn(300) ) :
( b.stop(false, true).fadeOut(300) ) ;
});
(with your markup and the use of ternary-operators)
You all might be looking for this awsmness.....
$(document).ready(function () {
$('#content').hover(function () {
$('.a').stop(true).fadeTo(500, 0.7);
$('.i').stop(true).fadeTo(500, 0.9);
}, function () {
$('.a').stop(true).fadeOut(500);
$('.i').stop(true).fadeTo(500, 1);
});
$('.a').hover(function () {
$('.i').stop(true).fadeTo(500, 0.95);
}, function () {
$('.a').stop(true).fadeTo(500, 0.7);
$('.i').stop(true).fadeTo(500, 0.9);
});
});
http://jsfiddle.net/Sourav242/p0z0oh82/

Categories