This issue has been solved by changing the blink function to include an ordering to all objects.
Here is the latest jsfiddle in case you're interested.
http://jsfiddle.net/6UjF3/4/
I am trying to make a page where it display different section based on users choice.
When you click one button, it shows two objects in animated order, one object would appear after another. This effect needs to be repeat every time you click the corresponding button. Now the problem is that when user switches between two buttons, the blink animation won't always show the correct order of objects.
here is the functions i used:
$(document).ready(function()
{
function blinkObject () {
$('.blink').fadeTo(0,0);//hide at first
$('.blink').each(function(i) {//for each blink
$(this).delay(i*1500).animate({opacity: '1'}, 1000);
});
}
$("#b1").click(function(){
$('.blink').stop(true,true);
$(".page1").css({"display": "block"});
$(".page2").css({"display": "none"}); //
blinkObject ();
});
$("#b2").click(function(){
$('.blink').stop(true,true);
$(".page1").css({"display": "none"});
$(".page2").css({"display": "block"}); //
blinkObject ();
});
});
Here is the jsfiddle: http://jsfiddle.net/6UjF3/3/
ps: i updated the jsfiddle with one of the answers and now it has been working pretty well, except the order will be incorrect after switch back and forth a few times.
this might be easier
jQuery
function blinkObject(p) {
$('.page').eq(p).show().children('.blink').stop(false,true).each(function(i) {//for each blink
$(this).stop(true,false).fadeTo(0,0).delay(i*1000).animate({opacity: '1'}, 1000);//fadein
}).end().siblings('.page').hide();//hide siblings
}
$('.page').first().siblings('.page').hide();//hide all but first
$(".but").each(function(i){
$(this).on('click', function() {
blinkObject(i);//run blink
});
});
I added a class of page on the pages, and a class of but on the buttons.
made a fiddle: http://jsfiddle.net/filever10/rruM9/
Here what I came up with but I have to go so I cant help any further.
$("#b1").click(function(){
$('.blink').stop(true,true);
$(".page1").removeClass("invisible");
$(".page1").addClass("visible"); //
$(".page2").removeClass("visible"); //
blinkObject ();
});
The key is the stop(). This will stop other animations from running and make it switch smoother.
http://jsfiddle.net/6UjF3/2/
You forgot to remove invisible class from page1, this works.
$("#b1").click(function(){
$(".page1").removeClass("invisible");
$(".page1").addClass("visible"); //
$(".page2").removeClass("visible"); //
blinkObject ();
});
Related
I have 36 boxes where you hover over the title and it slides up to show the hidden text below it, whilst it works as expected the problem is all 36 boxes slide up at the same time instead of just the one you moused over here is the script I am using:
$(document).ready(function() {
$('.caption').mouseenter(function(){
$('.caption').stop().animate({height: "60%"});
});
$('.box').mouseleave(function(){
$('.caption').stop().animate({height: "8%"}, 1000, function() {
});
});
});
Now after much reading I found that I need to use "this" so I tried this:
$(document).ready(function() {
$('.caption').mouseenter(function(){
$('.caption', this).stop().animate({height: "60%"});
});
$('.box').mouseleave(function(){
$('.caption', this).stop().animate({height: "8%"}, 1000, function() {
});
});
});
However that just disables the animation altogether, I tried using ".next" also and many other combinations that just resulted in the animation being disabled also.
In short, I have 36 boxes and I only want the actual one you mouse over to slide up not all of them at the same time.
I am a total jQuery novice and have searched for hours but cannot find a working example of exactly what I wish to achieve. Help is greatly appreciated.
Try taking the .caption out of your animate function and just use the reference to this like this
$(document).ready(function() {
$('.caption').mouseenter(function(){
$(this).stop().animate({height: "60%"});
});
$('.box').mouseleave(function(){
$(this).stop().animate({height: "8%"}, 1000, function() {
});
});
});
The this object when used with a jquery even is a reference to the specific element the event was called on.
Ah I got it !
$(document).ready(function() {
$('.caption').mouseenter(function(){
$(this).stop().animate({height: "60%"});
});
$('.caption').mouseleave(function(){
$(this).stop().animate({height: "8%"}, 1000, function() {
});
});
});
Just changed .box to .caption and its working, Thank you guys for you help !
I am going to mark yours as correct though since your answer did put me in the right direction and I only had to make that small change.
I have the following script which fades in multiple divs called 'noti_box'. If a user closes these divs then another div 'advert' fades in in its place.
<script>
$(document).ready(function(){
var animations = [];
$('.noti_box').each(function(i) {
animations.push(
$(this).hide().delay(i * 1000).fadeIn(1500).promise()
);
});
$.when.apply($, animations).done(function () {
time=setInterval(function(){
if ( $('.noti_box:visible').length === 0 ) {
$(".advert").fadeIn("slow");
} },200);
});
});
</script>
this works fine, basically what happens here is my last function is stuck on a loop, where the 'advert' div fades in when 'noti_box' is not visible on the page.
However, now I want a user to click a div called 'icons' and if they do, then this should re-fade in the 'noti_box' divs and fade out the 'advert' div using this code:
<script>
$('.icons').click(function(){
$('.advert').fadeOut('fast');
$('.noti_box).fadeIn('fast');
});
</script>
The problem I have here is the 'advert' div fades in and out again in the blink of an eye, without fading in my 'noti_box' div. This is because my first javascript function is still on a loop and preventing my second script from executing.
So what I need to do, I think is set a time out interval for my first script when a user clicks my div 'icon' and then clear the time out interval once the script has executed and the 'noti_box' divs are once again showing.
Can someone please show me how I would be able to do this as I am brand new to jquery. Thanks
function notiBox(ele){
this.ele=ele;
this.ele.hide().fadeIn('slow');
console.log("I have been born! "+ele);
}
notiBox.prototype={
constructor:notiBox,
advert:function(){
var ele=this.ele;
this.ele.fadeOut('fast',function(){ele.next('.advert').fadeIn('slow');});
},
fadeBack:function(){
var ele=this.ele;
this.ele.next('.advert').fadeOut('slow',function(){ele.fadeIn('slow');});
},
}
$(document).ready(function(){
var timeIn=1;
$('.noti-box').each(function(){
var self=this;
this.timer=setInterval(function(){self.notiBox=new notiBox($(self));clearInterval(self.timer);},1000*timeIn);
timeIn++;
});
$('.icon').click(function(){
$('.noti-box').notiBox.fadeBack();
});
});
Right the above is a 'OOP' based approach to your problem. The only problem you might have with this is that your advert divs are not next to the box div. Sorry I guess your DOM elements and layout. Also my methods my not be correct because it's been so long since I've written something like that. I'll do some tests. In the mean time, could you put up some HTML? So that I can adjust my code :d
I'm working with cookies to run or not run a jQuery animation someone else built:
$(function () {
$('div.transitional').click(function () {
$('div.intro').removeClass('hidden');
$('div.final').off('click');
});
ShowDiv($("div.transitional.hidden")[0]);
});
function ShowDiv(target) {
target = $(target);
target.removeClass('hidden');
target.delay(500).animate({
opacity: 1.0
}, 300, 'easeInExpo', function () {
ShowDiv($("div.transitional.hidden")[0]);
})
}
I have the cookie part working, but I'm confused about the anonymous function and the "ShowDiv" function.
What is each part doing?
Functionally, the animation makes visible a series of pictures, then the whole site. I want to skip the animation and just make the whole site visible (if cookies='visited'.) I'd like to do this without rewriting the animation script.
Here's a link: http://claytonsalem.com/bottlecap.
What happens now is if you have the cookie the animation doesn't run and everything is hidden.
That script only fades in elements, one after the other. If you want to skip that, use something like this in the anonymous function (which is also known as a DOM ready handler) :
$(function() {
$('div.transitional').click(function() {
$('div.intro').removeClass('hidden');
$('div.final').off('click');
});
if(cookies === "visited") //Assuming you already have the variable set.
ShowDiv($("div.transitional.hidden")[0]);
else
$("div.transitional.hidden").css('opacity', 1).removeClass('hidden')
});
I will focus on how it works:
$("div.transitional.hidden")
This would select ALL elements with div.transitional.hidden, placing them in a list.
By placing [0] in the selector, we are picking ONLY the first element in this list.
Then, when the script begins to run, this element is modified by target.removeClass('hidden'), which removes the hidden class.
When the scripts ends, it calls the $("div.transitional.hidden")[0] selector again, but this time it will not include the previously selected element (because it no longer has the hidden class).
That's why the script show images one after the other: it removes the hidden class and selects the next remaining element.
You might refer to Karl's answer on how to show your whole site.
I am programming a section of a website using jquery, where when you mouse over a button it hides a specific div and shows another one, then when the mouse leaves it hides that one and shows the original, and it works great, but when you go over the buttons to fast it gets flickery and starts showing all the divs(doesnt hide some)
My code:
function changeAddPanelText(element, element2) {
$(element).hover(function(){
$("#add-content-desc1").toggle();
$(element2).fadeIn(700);
},
function(){
$(element2).toggle();
$("#add-content-desc1").fadeIn(700);
});
}
any ideas ? thanks
Edit: I updated the code to the current version.
Try this
function changeAddPanelText(element, element2) {
$(element).hover(function(){
$("#add-content-desc1, element2").stop().toggle();
}, function(){
$("#add-content-desc1, element2").stop().toggle();
});
}
I need to prevent link from being clicked for let's say 2 seconds.
Here is an example http://jsbin.com/orinib/4/edit
When you look at the rendered mode you see next and prev links. When you click next, it slides with a nice transition. However if you click multiple times there is no transition sort of, which is expected. But my question: is this how can I prevent clicking on the next link, for about 2 seconds (or what ever time it takes for transition to happen) so that no matter what transition will occur.
This is what I tried to use, but did not work:
function(){
var thePreventer = false;
$("#next").bind($(this),function(e){
if(!thePreventer){
thePreventer = true;
setTimeout(function(){
thePreventer = false;
}, 2000);
}else{
e.preventDefault();
}
});
}
Which I got from here "Disable" a link temporarily when clicked? I think. I believe that i cannot achieve this effect with this code (although it works on other links). I believe this is due to the fact that cycle-plugin got a hold of that link, and I understand that I have to bind/tap-into this functionality of the plugin. Please note: that this code may not work I just used it to show that I tried it and it did not work, you can reuse it if you have to or give me your own stuff.
Please help, if you can.
EDIT:
As mrtsherman proposed this simple yet elegant ANSWER: http://jsfiddle.net/LCWLb.
Take a look at the cycle options page. There are a number of ways to do this. I would consider using the pager event onPrevNextEvent. You can assign a callback function.
$('#slideshow').cycle({
pager: '#nav',
onPrevNextEvent: function(isNext, zeroBasedSlideIndex, slideElement) {
//disable controls
},
after: function(currSlideElement, nextSlideElement, options, forwardFlag) {
//reenable controls
}
});
The following will temporarily prevent clicks while a slideshow is running, as shown in this fiddle:
$.fn.extend({
delayClick: function(callback) {
this.bind('click', function(e) {
$self = $(this);
if( $self.hasClass('disabled') ) {
$('#log').append('<p>click prevented on '+$self.attr('id')+'</p>');
}
else {
$self.addClass('disabled');
callback.call(this, [arguments]);
setTimeout(function() {
$self.removeClass('disabled');
}, 1000);
}
return false;
});
}
});